一、前言
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
它即可以應用于容器中，也可以應用于行內(nèi)元素。Flex布局，可以簡便、完整、響應式地實現(xiàn)各種頁面布局。[只有橫向伸縮，沒有縱向伸縮的，但是可以縱向排版]
二、flex簡介
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。項目默認沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
三、容器中的屬性
- flex-direction 容器內(nèi)項目的排列方向(默認橫向排列)
- flex-wrap 容器內(nèi)項目換行方式
- flex-flow 以上兩個屬性的簡寫方式
- justify-content 項目在主軸上的對齊方式
- align-items 項目在交叉軸上如何對齊
- align-content 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
(1) flex-direction
.box {flex-direction: row | row-reverse | column | column-reverse;}
屬性可選值的范圍為row(默認)沿水平主軸由左向右排列;row-reverse沿水平主軸由右向左排列;column沿垂直主軸右上到下和column-reverse。
(2) flex-wrap
.box{flex-wrap: nowrap | wrap | wrap-reverse;}
屬性可選值的范圍為nowrap(默認)不換行、wrap換行（第一行在上方）和wrap-reverse
(3) flex-flow
.box {flex-flow: || ;}
寫法屬性中，將上述兩種方法的值用||連接即可
(4) justify-content
.box {justify-content: flex-start | flex-end | center | space-between | space-around;}
屬性值 說明
flex-start 項目以主軸左側(cè)對齊
flex-start 項目以主軸左側(cè)對齊
flex-end 項目以主軸右側(cè)對齊
center 項目以主軸中心居中對齊
space-between 項目兩端對齊，項目之間的間隔都相等
space-around 項目兩端對齊，每個項目兩側(cè)的間隔相等
（5）align-items
.box {align-items: flex-start | flex-end | center | baseline | stretch;}
屬性值 說明
stretch 如果項目未設置高度或設為auto，將占滿整個容器的高度
flex-start 項目以交叉軸起點對齊
flex-end 項目以交叉軸終點對齊
center 項目以交叉軸的中點對齊
baseline 項目以第一行文字的基線對齊
（6）align-content
align-content: stretch(默認值) | flex-start | flex-end | center | space-between | space-around;
屬性值 說明
stretch 軸線占滿整個交叉軸
flex-start 以交叉軸起點對齊
flex-end 以交叉軸的終點對齊
center 以交叉軸的中點對齊
space-between 以交叉軸兩端對齊，軸線之間的間隔平均分布
space-around 以交叉軸兩端對齊，每根軸線兩側(cè)的間隔都相等
四、項目的屬性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
(1) order屬性
.item { order: ;}
order屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。
(2) flex-grow屬性
flex-grow: <number>;
flex-grow屬性用于設置項目的放大比例（分配剩余空間）
- 默認值：0
- 如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間
- 如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。
(3) flex-shrink屬性
flex-shrink: <number>;
flex-shrink屬性用于設置項目的縮小比例（處理溢出空間）
- 默認值：1
- 如果所有項目的flex-shrink屬性都為1，則當空間不足時，都將等比例縮小。
- 如果一個項目的flex-shrink屬性為0，則空間不足時，該項目不縮小。
(4) flex-basis屬性
flex-basis: auto | <length>;
flex-basis屬性定義了分配多余空間之前，項目占據(jù)的主軸空間
- 默認值：auto
- 瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。
- flex-basis屬性設置固定值（例如：350px），則項目將占據(jù)固定空間。
(5) flex屬性
flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ]
flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值:0 1 auto
【如果設置了flex-basis屬性值，flex-grow和flex-shink就失效了】
(6) align-self屬性
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
參考文獻：
Flex 布局教程：語法篇 --http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 布局教程：實例篇 --
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
