flex佈局絕對是我們平常在佈局中用的最多的一個屬性，我們來看看它在can i use中的瀏覽器支持度：（截止到2019/11/16） 挖藕，凹森！支持度居然這麼好，好到連ie也能支持大部分的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)表示無論如何都不伸縮。
