Flex彈性佈局之flex-basis、flex-grow、flex-shrink分析
在MDN上有關Flex佈局的屬性中。
對於flex-basis、flex-grow、flex-shrink三個屬性結合起來測試。
附連結,直接開啟在CodePen中修改測試。
拉到最後案例處,大概佈局結果圖就是,然後線上編輯:
先來看MDN中對 flex-basis 的解釋:
CSS 屬性 flex-basis
指定了flex
元素在主軸方向上的初始大小。
再看MDN中對 flex-shrink 的解釋:
CSSflex-shrink
屬性指定了
flex 元素的收縮規則。
flex 元素僅在預設寬度之和大於容器的時候才會發生收縮,其收縮的大小是依據
flex-shrink 的值。
在flex-shrink屬性的CodePen中,我們把css中.box1 樣式值改一下(有關修改程式碼在文章最下方已附上)
.box1 {
flex-shrink: 5; /*由2改成5,另A、B、C 與 D、E 的寬度對比更明顯*/
}
這個例子中 flex-basis的屬性值是120px,即<div id="content"></div>裡邊的每個專案的寬度的初始大小為120px,
ABCDE加起來寬度一共是600px,超過了#content容器盒的預設寬度500px,
此時flex-shrink的收縮規則在這些flex元素中就能生效了,從而根據其值顯示以上效果。
那麼反過來思考,當ABCDE專案寬度之和小於或者等於#content容器盒(500px)的寬度時候,flex-shrink屬性將不再生效。
即將 ABCDE五個專案的 flex-basis 屬性值由原來的120px 修改到 90px,A、B、C與D、E將不再進行縮放。
#content div {
flex-basis: 90px; /* 由120px改為90px */
border: 3px solid rgba(0,0,0,.2);
}
當每個專案的初始大小flex-basis 從120px變為90px後,每個專案的實際寬度為96px(容器content下的每個div設定的有border:3px.)
而五個96px的總長度小於容器預設長度 500px,根據上述該屬性的特性:
CSSflex-shrink
屬性指定了
flex 元素的收縮規則。
所以此時flex-basis屬性將不再生效。div不會進行縮放。
附原始碼:(在MDN案例上修改過的)
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
<p>the width of D is not the same as A's</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px; /* 修改處 */
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 5; /* 修改處 */
}