css Flex布局的可伸縮性(Flexibility)

2024-07-11 09:08:02

字體：大中小

來源：轉載

供稿：網友

Flexibility

Flex伸縮布局決定性的特性是讓伸縮項目可伸縮，也就是讓伸縮項目的寬度或高度自動填充剩余的空間。這可以以flex屬性完成。一個伸縮容器會等比地按照各伸縮項目的擴展比率分配剩余空間，也會按照收縮比率縮小各項目以避免溢出。

Flex屬性

flex屬性可用來指定可伸縮長度的部件：擴展比率，收縮比率，伸縮基準線。當有一個元素是伸項目時，flex屬性將代替主軸長度屬性決定元素的主軸長度。若元素不是伸縮項目，則flex屬性不生效。

flex 是 flex-grow、flex-shrink、flex-basis的縮寫

.item {    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

<'flex-grow'> 取值為 <number> ，用來指定項目的擴展比率；若在flex縮寫省略了此屬性值，則flex-grow的指定值是 1；
<'flex-shrink'>取值為 <number> ，用來指定項目的收縮比率；若在flex縮寫省略了此屬性值，則flex-shrink的指定值是 1；
<'flex-basis'>取值為 <length> | auto ，用來定義在分配多余空間之前，項目占據的主軸空間，也就是子元素的基準值，flex-basis 規定的范圍取決于 box-sizing；若在flex縮寫省略了此屬性值，則flex-basis的指定值是 0%。

flex-basis取值的幾種情況：

固定的長度值，（比如350px），則該項目將占據固定長度的空間；
auto,首先會檢索該項目的主尺寸（也就是該項目的width/height的值，是width還是height取決于主軸的方向，下面假設主軸的方向為水平方向），如果該項目的主尺寸不為auto，則該項目的flex-basis（基準值）采用主尺寸的值；如果該項目的主尺寸為auto（也就是width:auto或不設置項目的width屬性時），則使用該項目的內容content大小為基準值；
百分比，根據其包含塊（即伸縮父容器）的主尺寸計算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決于子元素），則計算結果和設為 auto 一樣。

flex 的常見值

flex的默認值：由于 flex-grow、flex-shrink、flex-basis三個屬性值在不設置的情況下默認值分別為 0、1、auto，所以flex的默認值為：flex:0 1 auto;

.item {    flex: 0 1 auto;}/*這種情況先根據width／height屬性決定元素的尺寸。（如果項目的主尺寸為auto，則會以其內容大小為基準）當剩余空間為正值時，伸縮項目無法伸縮，但當空間不足時，伸縮項目可收縮至其[最小]值。默認狀態下，伸縮項目不會收縮至比其最小內容尺寸更小?？梢酝ㄟ^設置「min-width」或「min-height」屬性來改變這個默認狀態。*/

flex: 0 auto：由于之前提到過，若在flex的縮寫中省略了flex-shrink的值，則該值指定為 1，所以flex:0 auto就相當于flex:0 1 auto（也就是與flex取默認值一樣）；

flex: initial：與flex:0 1 auto相同；

flex: auto: 若在flex的縮寫中省略了flex-grow和flex-shrink的值，則他們的值都指定為 1，所以flex:auto就相當于flex:1 1 auto；

.item {    flex: auto;  /*相當于flex:1 1 auto;*/}/*根據width／height屬性決定元素的尺寸，但是完全可以伸縮，會吸收主軸上剩下的空間*/

flex:none：相當于flex: 0 0 auto;

.item {    flex: none;  /*相當于flex:0 0 auto;*/}/*根據width／height屬性決定元素的尺寸，但是完全不可以伸縮*/

當flex取值為某個正數時，則這個正數是flex-grow的取值，由于在flex的縮寫中省略了flex-shrink和flex-basis的值，而他們在被省略了時的取值分別為1、0%，所以flex:1就相當于flex:1 1 0%；

.item {    flex: 1;  /*相當于flex:1 1 0%;*/}/*以父容器的寬度為基數計算，元素完全可伸縮*/

當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1（注意 0% 是一個百分比而不是一個非負數字）；

.item {    flex:120px;  /*相當于flex:1 1 120px;*/}.item1 {   flex: 0%; /*相當于flex:1 1 0%;*/}

當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%；

.item {    flex:2 1;  /*相當于flex:2 1 0%;*/}

當 flex 取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1；

.item {    flex:2 120px;  /*相當于flex:2 1 120px;*/}

舉例

html如下：

<div class="box">    <div class="item-1"></div>    <div class="item-2"></div>    <div class="item-3"></div>  </div>

css如下：

.box {  display: flex;  width: 800px;}.box > div {  height: 200px;}.item-1 {  width: 160px;  flex: 2 1 0%;  background: #2ecc71;}.item-2 {  width: 100px;  flex: 2 1 auto;  background: #3498db;}.item-3 {  flex: 1 1 200px;  background: #9b59b6;}

得到的結果如下：

css,Flex布局,可伸縮性,Flexibility