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