flex 復合屬性,設定或檢索彈性盒模型物件的子元素如何分配空間。
由以下三個屬性組成：
<』 flex-grow 『>：
用來指定擴充套件比例，即剩餘空間是正值時此flex子項相對於flex容器裡其他flex子項能分配到空間比例，在flex屬性中該值如果被省略則預設為1
<』 flex-shrink 『>：
用來指定收縮比例，即剩餘空間是負值時此flex子項相對於flex容器裡其他flex子項能收縮的空間比例。在flex屬性中該值如果被省略則預設為1
在收縮的時候收縮比例會以伸縮基準值加權(希望大家深入理解這句話)
<』 flex-basis 『>：
用來指定伸縮基準值，即在根據伸縮比率計算出剩餘空間的分布之前，flex子項寬度的起始數值， 在「flex」屬性中該值如果被省略則預設為0
在flex屬性中該值如果被指定為auto，則伸縮基準值的計算值是自身的 width 值，如果自身的寬度沒有定義，則寬度取決於內容
快捷屬性值：
auto 1 1 auto 會根據主軸自動伸縮以占用所有剩餘空間
none 0 0 auto 在任何情況都不會發生伸縮
initial 0 1 auto 在有剩餘空間的時候也不會擴充套件，但在空間不足時會進行收縮（initial 設定該屬性的屬性值為初始值）
如果縮寫「flex: 1」, 則其計算值為「1 1 0」
如果縮寫「flex: auto」, 則其計算值為「1 1 auto」
如果「flex: none」, 則其計算值為「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值
示例：如下情況每個元素的計算寬是多少
code：
class="flex">
ali>
bli>
cli>
ul>
.flex
.flex :nth-child(1)
.flex :nth-child(2)
.flex :nth-child(3)
收縮因子 1 : 2 : 3
伸縮基準 300 : 200 : 400=3 : 2 : 4
收縮比例會以伸縮基準值加權
1*3 : 2*2: 3*4=3 : 4：12
於是我們可以計算a,b,c將被移除的溢位量是多少：
a被移除溢位量：(1/19)*100，即約等於16px
b被移除溢位量：(4/19)*100，即約等於21px
c被移除溢位量：(12/19)*100，即約等於63px
最後a,b,c的實際寬度分別為：300-16=284px, 200-21=179px, 400-63=337px
code：
class="flex">
ali>
bli>
cli>
ul>
.flex
.flex :nth-child(1)
.flex :nth-child(2)
.flex :nth-child(3)
於是我們可以計算a,b,c將被擴充套件量是多少：
a的擴充套件量：1/6*600，即約等於100px
b的擴充套件量：2/6*600，即約等於200px
c的擴充套件量：3/6*600，即約等於300px
最後a,b,c的實際寬度分別為：300+100=400px, 200+200=400px, 400+300=700px
從本例能看出：
當「flex-basis」在「flex」屬性中不為0時，「flex子項」將分配容器的剩餘空間（剩餘空間即等於容器寬度減去各項的伸縮基準值）
當「flex-basis」在「flex」屬性中等於0時，「flex子項」將分配容器的所有空間（因為各項的伸縮基準值相加等於0，剩餘空間等於容器寬度減去各項的伸縮基準值，即減0，最後剩餘空間值等於容器寬度），所以可以借助此特性，給各子項定義「flex: n」來進行按比例均分容器總寬度
flex彈性布局屬性詳解！
詳細看下flex彈性布局具體屬性 flex容器屬性詳解 flex direction row column 橫排 豎排 決定元素的排列方向 flex wrap nowrap wrap wrap reverse 翻轉 排列不下時如何排，預設排不下就壓縮進行排 flex flow是 flex direc...
關於彈性布局flex
hellozxy9527flex彈性布局的使用 關於彈性布局的簡介 在之前的學習中，對頁面布局有了大概的了解，發現許多頁面的布局都是遵循幾個盒子水平排列，或是豎直排列 豎直排列還好，水平方向則需要使用float屬性，在加上設定間隔等，繁多，且容易混淆。而flex彈性布局則良好的解決了這個問題。1.容...
Flex彈性布局基礎屬性
彈性布局可以簡潔 完整 響應式的實現各種頁面布局。螢幕和瀏覽器視窗大小變化也可以靈活調整布局 指定伸縮元素沿著主軸或者側軸，按照一定比例分配額外的空間，調整伸縮元素的大小 指定伸縮元素沿著主軸或者側軸，把伸縮元素額外空間分配到伸縮元素之前 之後和之間 控制元素在頁面上的布局方向 指定如何將垂直於元素...