正確使用彈性屬性的方法來嵌套彈性容器
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屬性。由於每個屬性執行不同的功能，不存在內部衝突，也不需要覆蓋任何內容。