flex招式心法

　　flex佈局絕對是咱們日常在佈局中用的最多的一個屬性，咱們來看看它在can i use中的瀏覽器支持度：（截止到2019/11/16）

　　挖藕，凹森！支持度竟然這麼好，好到連ie也能支持大部分的flex佈局的屬性，那接下來咱們就看看它的三大招式吧。

　　

基本概念

　　任何一個元素，不管塊級元素仍是行內元素，均可以設置爲flex容器，接下來都簡稱爲「容器」，塊級元素設置display: flex，行內元素設置display: inline-block。

　　元素一旦設置成爲flex容器，其向下的第一級子元素將自動變成flex項目，接下來簡稱「項目」，並強制附上inline-block屬性，同時項目的float、vertical-align、clear屬性將所有失效。

　　容器默認有兩根軸，一根主軸，一根副軸。主軸的默認方向爲水平方向。

　　

容器屬性

　　1，flex-direction。定義主軸的方向，默認爲row，即橫向排列。可設置爲column，表示縱向排列；

　　2，justify-content。定義項目在主軸上的排列方式，默認值爲flex-start，可取值flex-start | flex-end | center | space-between | space-around。還有一個space-evenly，但這個屬性不建議使用，由於它的支持度不高，尤爲是移動端設備；

　　3，align-items。定義項目在副軸上的對齊方式，默認值爲stretch。可能取值 flex-start | flex-end | center | stretch | baseline。着重說一下後兩個，若是項目沒有設置固定高度的話，stretch屬性將把這個子項目拉長至充滿整個高度,固然若是設置了項目的固定高度,那這個屬性並不能起到什麼做用。而baseline就厲害了，它會去取每一個項目的第一行文字，不管文字大小，將基於文字底部對齊。

　　

 

 

 

 

　　4，flex-wrap。定義項目在軸線上排不下的時候是否進行換行。默認值爲nowrap。當設置爲wrap時，將優先保證自身寬度，

 

 

 　　

　　這裏並未列出一些例如flex-flow這樣的組合屬性，以及相似wrap-reverse這種冷門的取值，基本上flex容器理解這四個屬性，已經能夠知足絕大部分的佈局需求。

　　

項目屬性

　　1，flex-grow。"grow"是成長的意思，flex-grow定義項目在容器存在多餘空間時，是否放大本身。默認爲0，表示不放大。若是有好幾個項目設置了flex-grow屬性大於0，則它們將根據flex-grow的比例蠶食剩餘空間。

　　

 

　　喲，這不就是當年那個所謂的聖盃雙飛翼佈局嗎？？如今實現起來真是廉價。

 　　

 　　2，flex-shrink。定義項目在容器空間不足時是否縮小，默認值爲1，即會縮小，0表示不願縮小。那要是它喵的個個的flex-shrink都爲0，又不換行，內容又多，會出現什麼狀況呢，那就是會超出。

 

 3，flex-basis。定義項目在放入容器前的初始寬度，默認值爲auto，即項目自己的大小。能夠設置具體的像素，當width和flex-basis同時存在時，flex-basis的優先級將高於width。

　　可是這個屬性很制杖，看了不少文章，flex-shrink作的事跟width作的事徹底同樣，因此我認爲這算一個冗餘屬性。

 

4，align-self。表示項目單獨搞特殊化，其屬性值將覆蓋父元素設置的align-items值，取值與align-items的取值徹底一致。

 

5，組合屬性flex：它是"膨脹，萎縮，初寬"的簡寫，即flex-grow + flex-shrink + flex-basis。默認值爲0 1 auto。它有兩個快捷值：auto(1 1 auto)表示等比例伸縮，以及none(0 0 auto)表示不管如何都不伸縮。