正确使用弹性属性的方法来嵌套弹性容器

Question

我在正确使用flexbox时遇到了一些问题，想要对父元素和子元素的嵌套有一些澄清。

我知道子元素会继承父元素的flex属性，但是对于进一步的后代元素（例如“孙子”）会发生什么呢？在这种情况下，flexbox的正确用法是什么？

换句话说，我是否也需要将display: flex应用于子元素，以应用于子元素的子元素？这样会覆盖第一个子元素的父元素的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>

Answer 1

一个flex格式化上下文的范围仅限于父子关系。

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

超出子级的flex容器的后代不属于flex布局，也不会接受flex属性。

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

某些flex属性仅适用于flex容器（例如justify-content、flex-wrap和flex-direction），而某些flex属性仅适用于flex项目（例如align-self、flex-grow和flex）。

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