一篇文章弄懂flex佈局

 壹 ❀ 引

談到flex佈局，我不知道有多少人跟我同樣，在本能的想到justify-content:center與align-items:center兩條屬性以後，除此以外的其它屬性竟然顯得格外陌生。

能夠說包括我在內的大部分人，都是在被flex垂直水平居中方式所驚豔后纔對其有所瞭解，以致於在平常開發中對於flex的使用，也確實更偏向於元素對齊方式的使用。

對我而言，flex佈局不該該侷限於對齊方式的使用，熟練掌握它對於頁面佈局也是有較大好處的，因此這篇文章主要是偏向於flex屬性筆記式記錄，畢竟真要學習flex阮一峯大神的flex教程纔是首選，那麼本文開始。

 貳 ❀ 關於flex佈局

咱們知道當並列書寫多個div標籤，它們會縱向向下排位，若是咱們想將多個div並列成一排，就得藉助position，float，或display屬性，這即是傳統的盒模型作法。

而flex佈局則是一種新的佈局方案，經過爲修改父div的display屬性，讓父元素成爲一個flex容器，從而能夠自由的操做容器中子元素(項目)的排列方式。

例如咱們讓多個div橫向排列，傳統作法是使用浮動，但浮空後由於脫離文檔流的緣故，父元素會失去高度，這又涉及了清除浮動等一系列的問題。

而flex佈局相對簡單不少，修改父元素display:flex，你會發現div自動就排列成了一行，並且沒有浮動以後的反作用，從迴流角度考慮，flex的性能更優於float；隨着瀏覽器不斷兼容以及舊版本的淘汰，flex佈局註定會成爲更爲流行的佈局方案。

flex佈局屬性主要由容器屬性和項目屬性構成，下面我會分開討論這兩類屬性。

 貳 ❀ 容器屬性

1.flex-direction屬性

取值：row(默認) | row-reverse | column | column-reverse

用於控制項目排列方向與順序，默認row，即橫向排列，項目排列順序爲正序1-2-3；row-reverse同爲橫向排列，但項目順序爲倒序3-2-1。

column 與row相反，爲縱向排列，項目順序爲正序1-2-3，column-reverse同爲縱向排列，項目順序爲倒序3-2-1。

2.flex-wrap屬性

取值：nowrap(默認) | wrap | wrap-reverse

用於控制項目是否換行，nowrap表示不換行；

舉個例子：好比容器寬度爲300px，容器中有6個寬度爲60px的項目，nowrap狀況下，項目會強行等分容器寬度從而不換行，那麼項目實際寬度也就只有50px了，而非咱們本身設置的60px。

注意，若是此時咱們將flex-direction屬性修改成column，你會發現項目在縱軸上並不會等分容器高度，而是直接超出容器。

wrap表示換行，即項目不會等分容器寬度，而是根據自身寬度進行排列，若是超出父容器寬度則天然換行。

wrap-reverse一樣表示換行，須要注意的是第一排會緊貼容器底部，而不是咱們想象的項目6緊貼容器頂部，效果與wrap相反。

3.flex-flow屬性

flex-flow屬性是flex-deriction與flex-wrap屬性的簡寫集合，默認屬性爲row nowrap，即橫向排列，且不換行，若是須要控制項目排列與換行，推薦使用此屬性，而非單獨寫兩個。

4.justify-content屬性

取值：flex-start(默認) | flex-end | center | space-between | space-around | space-evenly;

用於控制項目在橫軸的對齊方式，默認flex-start即左對齊，center 爲居中，對應的flex-end爲右對齊。

space-between爲左右兩端對齊，即左右兩側項目都緊貼容器，且項目之間間距相等。

space-around爲項目之間間距爲左右兩側項目到容器間距的2倍，比較特別的佈局，平常使用不太多。

space-evenly爲項目之間間距與項目與容器間距相等，至關於除去項目寬度，平均分配了剩餘寬度做爲項目左右margin。

 5.align-items屬性

取值：flex-start | flex-end | center | baseline | stretch(默認)

用於控制項目在縱軸排列方式，默認stretch即若是項目沒設置高度，或高度爲auto，則佔滿整個容器，下面第一張圖的項目沒設置高度，其他圖片中均爲60px。

flex-start會讓項目在縱軸緊貼容器頂部，flex-end與之相反：

center使用最多，天然不會陌生，在縱軸中心位置排列：

baseline比較特殊，它讓項目以第一行文字的基線爲參照進行排列：

注意，常理來講justify-content與align-items默認分別處理項目橫軸，縱軸的對齊方式，但若是咱們修改了flex-direction爲column，它們處理的軸向會交換，也就是justify-content處理縱軸，align-items處理橫軸。

6.align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默認);

用於控制多行項目的對齊方式，若是項目只有一行則不會起做用；默認stretch，即在項目沒設置高度，或高度爲auto狀況下讓項目填滿整個容器，與align-items相似。注意，以下演示的12個項目我均沒有設置高度。

flex-start ，center，flex-end 與align-items屬性表現一致：

space-around與justify-content保持一致，即項目之間間距爲上下兩端項目與容器間距兩倍。

space-evenly同理，項目之間間距與項目到容器之間間距相等，space-between爲上下兩側項目緊貼容器。

align-content其實也有baseline等其它可用值，表現與上面介紹過的屬性一致，只是單行項目或多行項目的區別。

 叄 ❀ 項目屬性

介紹完容器屬性，簡單介紹下項目屬性。容器屬性是加在容器上的，那麼項目屬性呢，就是寫在項目上的，就比如容器屬性給ul，項目屬性給li差很少一個意思。

1.order

取值：默認0，用於決定項目排列順序，數值越小，項目排列越靠前。

2.flex-grow

取值：默認0，用於決定項目在有剩餘空間的狀況下是否放大，默認不放大；注意，即使設置了固定寬度，也會放大。

假設默認三個項目中前兩個個項目都是0，最後一個是1，最後的項目會沾滿剩餘全部空間。

假設只有第一個項目默認爲0，後面兩個項目flex-grow均爲1，那麼後兩個項目平分剩餘空間。

假設第一個項目默認爲0，第二個項目爲flex-grow:2，最後一個項目爲1，則第二個項目在放大時所佔空間是最後項目的兩倍。

3.flex-shrink

取值：默認1，用於決定項目在空間不足時是否縮小，默認項目都是1，即空間不足時你們一塊兒等比縮小；注意，即使設置了固定寬度，也會縮小。

但若是某個項目flex-shrink設置爲0，則即使空間不夠，自身也不縮小。

上圖中第二個項目flex-shrink爲0，因此自身不會縮小。

4.flex-basis

取值：默認auto，用於設置項目寬度，默認auto時，項目會保持默認寬度，或者以width爲自身的寬度，但若是設置了flex-basis，權重會width屬性高，所以會覆蓋widtn屬性。

上圖中先設置了flex-basis屬性，後設置了width屬性，但寬度依舊以flex-basis屬性爲準。

5.flex

取值：默認0 1 auto，flex屬性是flex-grow，flex-shrink與flex-basis三個屬性的簡寫，用於定義項目放大，縮小與寬度。

該屬性有兩個快捷鍵值，分別是auto(1 1 auto)等分放大縮小，與none(0 0 auto)不放大，但等分縮小。

6.align-self

取值：auto(默認) | flex-start | flex-end | center | baseline | stretch，表示繼承父容器的align-items屬性。若是沒父元素，則默認stretch。

用於讓個別項目擁有與其它項目不一樣的對齊方式，各值的表現與父容器的align-items屬性徹底一致。

到這裏，flex佈局屬性也就介紹完畢了，老實說，跟着完整寫了一遍，發現以前不少理解都錯誤了，最騷的是部分屬性單詞我都拼錯了，這篇博客就當flex筆記整理，如有緣人能看見，也但願能幫助到你。