我在正确使用flexbox时遇到了一些问题，想要对父元素和子元素的嵌套有一些澄清。
我知道子元素会继承父元素的flex属性，但是对于进一步的后代元素（例如“孙子”）会发生什么呢？在这种情况下，flexbox的正确用法是什么？
换句话说，我是否也需要将display: flex应用于子元素，以应用于子元素的子元素？这样会覆盖第一个子元素的父元素的flex属性吗？
1
888.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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
一个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属性。由于每个属性执行不同的功能，不存在内部冲突，也不需要覆盖任何内容。