Elastische Eigenschaften richtig nutzen, um elastische Container zu verschachteln

Question

Ich habe einige Probleme bei der korrekten Verwendung von Flexbox und hätte gerne eine Klarstellung zur Verschachtelung von übergeordneten und untergeordneten Elementen.

Ich weiß, dass untergeordnete Elemente die Flex-Eigenschaft des übergeordneten Elements erben, aber was passiert mit weiteren untergeordneten Elementen (z. B. „Enkelkindern“)? Was ist in diesem Fall die richtige Verwendung von Flexbox?

Mit anderen Worten: Muss ich display: flex auch auf untergeordnete Elemente anwenden? Überschreibt dies die Flex-Eigenschaft des übergeordneten Elements des ersten untergeordneten Elements?

.parent-container {
  Anzeige: Flex;
  Flex: 1 0 100 %;
  Hintergrundfarbe:gelb;
}
.child-container {
  Flex: 1 1 50 %;
  Hintergrundfarbe: blau;
}
.baby-of-child-container {
  Flex: 1 1 50 %;
  Hintergrundfarbe: grün;
}

<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属性。由于每个属性执行不同的功能，不存在内部冲突，也不需要覆盖任何内容。