嵌套flex容器时正确使用flex属性

  • Z时代
  • 2024-01-10
  • 分类：问答

我在正确使用flexbox时遇到问题，想澄清一下嵌套父元素和子元素的工作方式。

我知道孩子继承了父母的弹性。但是，如果您需要为孩子的孩子（孩子）抚养孩子，这会被覆盖吗？flexbox的正确用法是什么？

我什么时候都适用display: flex于孩子 的 孩子（婴儿）的缘故，或将是覆盖孩子的父母柔性？

.parent-container {
  display: flex;
  flex: 1 0 100%;
  background-color:yellow;
}
.child-container {
  flex: 1 1 50%
  background-color: blue;
}
.baby-of-child-container {
  flex: 1 1 50%;
  background-color: green;
}
<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
</div>

回答：

一个范围 被限制在一个父/子关系。

这意味着弹性容器始终是父容器，而弹性项目始终是子容器。Flex属性仅在此关系内起作用。

子代以外的flex容器的后代不是flex布局的一部分，并且不接受flex属性。

您始终需要向父级应用display: flex或display: inline-flex向父级应用，才能将flex属性应用于子级。

有迹象表明，仅适用于柔性容器（例如，某些弯曲特性justify-content，flex-wrap和flex-

direction），并有只适用于弯曲的物品一定弯曲特性（例如align-self，flex-grow和flex）。

但是，伸缩项目也可以是伸缩容器。在这种情况下，该元素可以接受所有的flex属性。由于每个属性执行不同的功能，因此不存在内部冲突，也不需要覆盖任何内容。

以上是 嵌套flex容器时正确使用flex属性 的全部内容， 来源链接： utcz.com/qa/435526.html

回到顶部