正确使用弹性属性的方法来嵌套弹性容器
P粉369196603
2023-08-24 11:43:49
<p>我在正确使用flexbox时遇到了一些问题，想要对父元素和子元素的嵌套有一些澄清。</p>
<p>我知道子元素会继承父元素的flex属性，但是对于进一步的后代元素（例如“孙子”）会发生什么呢？在这种情况下，flexbox的正确用法是什么？</p>
<p>换句话说，我是否也需要将<code>display: flex</code>应用于子元素，以应用于子元素的子元素？这样会覆盖第一个子元素的父元素的flex属性吗？</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
<p><br /></p>
一个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属性。由于每个属性执行不同的功能，不存在内部冲突，也不需要覆盖任何内容。