Flex很難？一文就足夠了

Flexible Box 是什麼

  佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局很是不方便，好比，垂直居中就不容易實現。因此在2009年，w3c提出了一種能夠簡潔、快速彈性佈局的屬性，主要思想是給予容器控制內部元素高度和寬度的能力，這就是今天要說的Flexible Box，彈性佈局。

  因爲瀏覽器的限制，在寫代碼以前推薦查詢一下兼容模式，瞭解下目前flex的支持程度，咱們能夠經過CanIuse這個網站來進行查詢，以下圖，能夠看到，除了對於IE支持通常以外，其餘瀏覽器大多沒啥毛病，但爲了以防萬一，在寫代碼的時候仍是加上-webkit-這一前綴以防萬一。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
複製代碼

重點！flex一共有兩根軸：main axis（主軸）和cross axis（交叉軸），你們通常認爲主軸就是水平，交叉軸就是垂直的。可是！這是錯誤的！請與水平垂直這兩個方位的概念區分開，這是一個方位，若是說當年定義的時侯爲何不命名爲vertical&horizon？？緣由就是main axis沒有一個固定的方位，因此請不要再經過水平垂直的方位來理解了。那麼主軸是怎麼區分的呢？其實很簡單按照當前flex的方向，是水平排列仍是垂直排列。若是是水平排列（row），主軸就是水平的，交叉軸就是垂直的，反之亦然。這是一個很重要的概念。

注意，設爲 Flex 佈局之後，子元素的float、clear和vertical-align屬性將失效。

屬性描述

父容器的屬性

flex-direction :該元素決定主軸的方向（即子元素的排列方向） 默認值 :row 適用於 :flex 容器

屬性	描述
row	主軸爲水平方向，起點在左端。
row-reverse	主軸爲水平方向，起點在右端。
column	主軸爲垂直方向，起點在上沿。
column-reverse	主軸爲垂直方向，起點在下沿。

flex-wrap :設置或檢索伸縮盒對象的子元素超出父容器時是否換行 默認值 :nowrap 適用於 :flex 容器

屬性	描述
nowrap	不換行(默認)
wrap	換行，第一行在上方
wrap-reverse	換行，第一行在下方

PS: flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap

.box {
  flex-flow: flex-direction flex-wrap|initial|inherit;
}
複製代碼

justify-content :定義了子元素在主軸上的對齊方式。 默認值 :flex-start 適用於 :flex 容器

屬性	描述
flex-start	左對齊（主軸起點對齊）
flex-end	右對齊（主軸終點對齊）
center	居中
space-between	兩端對齊，項目之間的間隔都相等
space-around	每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍

align-items :定義了子元素在交叉軸上的對齊方式 默認值 :stretch 適用於 :flex 容器

屬性	描述
flex-start	交叉軸的起點對齊
flex-end	交叉軸的終點對齊
center	交叉軸的中點對齊
baseline	子元素第一行文字的基線對齊,若是子標籤內沒有內容，將按照每一個 div 的底部對齊
stretch	若是項目未設置高度或設爲auto，將佔滿整個容器的高度

align-items: stretch 時每一個子元素的 height 必須爲 auto 不然 height 屬性會覆蓋 stretch 的效果

若是 div 內沒有內容，或者子標籤內沒有內容，將按照每一個 div 的底部對齊

align-content :定義多根軸線的對齊方式，若是子元素只有一根軸線，該屬性不起做用 默認值 :stretch 適用於 :多行的彈性盒模型容器

屬性	描述
flex-start	與交叉軸的起點對齊
flex-end	與交叉軸的終點對齊
center	與交叉軸的中點對齊
space-between	與交叉軸兩端對齊，軸線之間的間隔平均分佈
space-around	每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍
stretch	軸線佔滿整個交叉軸

PS: 在上面的例子 flex-wrap 需設爲 wrap, 且數量超出一行, 父容器的高度相對於子容器有多餘，才能看到效果

子元素的屬性

order :定義子元素的排列順序，數值越小，排列越靠前 默認值:0 適用於:flex子項和flex容器中的絕對定位子元素

PS：用整數值來定義排列順序，數值小的排在前面。元素的值能夠爲負值

flex-grow :定義子元素的放大比例 默認值 :0 適用於 :flex子項

<ul class="flex">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
複製代碼

.flex{display:flex;width:600px;margin:0;padding:0;list-style:none;}
.flex li {text-align:center;height:100px;}
.flex li:nth-child(1){width:200px;background-color:green;}
.flex li:nth-child(2){flex-grow:1;width:50px;background-color:yellow;}
.flex li:nth-child(3){flex-grow:3;width:50px;background-color:red;}
複製代碼

flex-grow的默認值爲0，若是沒有顯示定義該屬性，是不會擁有分配剩餘空間權利的。 本例中b,c兩項都顯式的定義了flex-grow，flex容器的剩餘空間分紅了4份，其中b佔1份，c佔3分，即1:3 flex容器的剩餘空間長度爲：600-200-50-50=300px，因此最終a,b,c的長度分別爲：
a: 200px
b: 50+(300/4*1)=125px
c: 50+(300/4*3)=275px

flex-shrink :定義子元素的收縮比例（與flex-grow相反） 默認值 :1 適用於 :flex子項

<ul class="flex">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
複製代碼

.flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
.flex li{width:200px;}
.flex li:nth-child(1){background:#888;}
.flex li:nth-child(2){background:#ccc;}
.flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
複製代碼

flex-shrink的默認值爲1，若是沒有顯示定義該屬性，將會自動按照默認值1在全部因子相加以後計算比率來進行空間收縮。
本例中c顯式的定義了flex-shrink，a,b沒有顯式定義，但將根據默認值1來計算，能夠看到總共將剩餘空間分紅了5份，其中a佔1份，b佔1份，c佔3分，即1:1:3
咱們能夠看到父容器定義爲400px，子項被定義爲200px，相加以後即爲600px，超出父容器200px。那麼這麼超出的200px須要被a,b,c消化
經過收縮因子，因此加權綜合可得200*1+200*1+200*3=1000px；
因而咱們能夠計算a,b,c將被移除的溢出量是多少：
a被移除溢出量：(200*1/1000)*200，即約等於40px
b被移除溢出量：(200*1/1000)*200，即約等於40px
c被移除溢出量：(200*3/1000)*200，即約等於120px
最後a,b,c的實際寬度分別爲：200-40=160px, 200-40=160px, 200-120=80px

PS:若是全部項目的 flex-shrink 屬性都爲 1，當空間不足時，都將等比例縮小。若是一個項目的 flex-shrink 屬性爲0，其餘項目都爲 1，則空間不足時，前者不縮小。負值對該屬性無效。

flex-basis :設置或檢索彈性盒伸縮基準值 默認值 :auto 適用於 :flex子項

flex-basis 控制元素的默認尺寸，而後再由其餘 Flexbox 屬性控制，能夠覆蓋 width 屬性

flex-basis 能夠和 width（主軸爲水平狀態）或者height（主軸爲垂直狀態） 屬性互換

PS:flex-basis 是經過主軸 (main axis) 來影響元素尺寸的

align-self:容許單個子元素有與其餘項目不同的對齊方式，可覆蓋align-items屬性 默認值 :auto 適用於 :flex子項

屬性	描述
auto	繼承父元素的"align-items"值，若是其沒有父元素，等同於"stretch"
flex-start	交叉軸的起點對齊
flex-end	交叉軸的終點對齊
center	交叉軸的中點對齊
baseline	第一行文字的基線對齊
stretch	若是項目未設置高度或設爲auto，將佔滿整個容器的高度

父元素: align-items:flex-end
a: align-self: flex-end
b: align-self: center
c: align-self: flex-start
d: align-self: baseline; padding: 20px 10px
e: align-self: baseline
f: align-self: stretch
g: align-self: auto

參考

1. CSS參考手冊
2. Flex 佈局教程-阮一峯
3. Even more about how Flexbox works — explained in big, colorful, animated gifs
4. How Flexbox works — explained with big, colorful, animated gifs