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)表示無論如何都不伸縮，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/103992.html
標籤：Html/Css
上一篇：css布局技巧
下一篇：grid網格布局——色子布局