如果想快捷的使用flex布局，請(qǐng)翻閱到底部。
FlexBox 彈性盒布局主要包括兩個(gè)部分，一個(gè)是container 容器，一個(gè)是items 子項(xiàng)。
把普通的盒布局變成彈性盒布局的方法是給父級(jí)容器‘display：flex’（或者display：inline-flex），考慮到webkit內(nèi)核兼容性，寫的時(shí)候要加-webkit前綴；設(shè)置為flex彈性布局以后子元素的float，clear，vertical-align屬性將會(huì)失效。
然后子項(xiàng)加上屬性flex：整數(shù)數(shù)字（表示比例），或者不加屬性flex屬性，設(shè)置寬或者高（跟主軸方向有關(guān)）固定數(shù)值，比如100px；則子項(xiàng)不受彈性盒布局的限制；容器除這個(gè)子項(xiàng)之外其他有flex的子項(xiàng)按比例分配寬度。
（1）主軸（main axis）：通過這個(gè)伸縮盒子特性，可以很好的管理伸縮項(xiàng)目在伸縮盒子中的布局方向。這個(gè)方向可以是從左到右，從上到下，從下到上，從右到左。這個(gè)主軸的方向可以通過flex-direction屬性來定義值分別為row，row-reverse，column，column-reverse。
（2）主軸起點(diǎn)（main start）和終點(diǎn)（main end）：伸縮項(xiàng)目從主軸起點(diǎn)開始布局到終點(diǎn)結(jié)束。屬性justify-content就是根據(jù)主軸的起點(diǎn)和終點(diǎn)賦予start，center，end等值來布局的。
（3）主軸長(zhǎng)度（main size）：伸縮項(xiàng)目在主軸方向上的寬度或者高度就是項(xiàng)目的主軸長(zhǎng)度。
（4）側(cè)軸（cross axis）：與主軸垂直的軸是側(cè)軸，所以說，側(cè)軸的方向是由主軸決定的。
（5）側(cè)軸的起點(diǎn)（cross start）和終點(diǎn)（cross end）：伸縮項(xiàng)目充滿伸縮行，并且伸縮行從側(cè)軸起點(diǎn)開始布局容器到側(cè)軸終點(diǎn)結(jié)束。
（6）側(cè)軸長(zhǎng)度（cross size）：伸縮項(xiàng)目在側(cè)軸方向上的寬度或者高度就是項(xiàng)目的側(cè)軸長(zhǎng)度。
容器是父級(jí)盒子，分為主軸（main axis）和縱軸（cross axis）
1.flex-direction
默認(rèn)是按照主軸顯示。不過也可通過flex-direction屬性設(shè)置主軸方向。四個(gè)值代表的主軸方向：
row: 從左到右
row-reverse: 從右到左
colum: 從上到下
colum-reverse: 從下到上
2.flex-wrap
flex-wrap設(shè)置當(dāng)內(nèi)容超出之后是否折行。
nowrap：不換行，而是通過收縮每一個(gè)孩子的寬度來擠在一行。
wrap: 換行。
wrap-inverse: 換行，但是折行方向相反，（比如默認(rèn)是折到下一行，但是這個(gè)屬性會(huì)導(dǎo)致折到上一行）。
效果圖如下：
3.flex-flow
flex-direction 和 flex-wrap 的組合寫法。
4.justify-content
不知道如何準(zhǔn)確翻譯 justify 這個(gè)詞。它的作用是定義了如何分配剩余的空白區(qū)域。
flex-start：主軸方向
flex-end: 主軸反方向
center: 擠在中間
space-between: 中間有空白。
space-around: 中間和兩邊都有空白。其中兩側(cè)的空白是中間的一半寬度，可以理解為每個(gè)孩子兩側(cè)都有相同寬度的空白，并且空白不合并。
效果圖：
5.align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box{align-items:flex-start | flex-end | center | baseline | stretch;}
以上是關(guān)于container的屬性，接下來看一下items 的屬性設(shè)置。
1.align-self
單獨(dú)在當(dāng)前孩子上覆蓋了 align-items 屬性。
2.order
order:<integer>給子項(xiàng)排序。
3.flex-grow
定義了主軸上，孩子分配剩余空白區(qū)域的比例。
4.flex-shrink
定義縮小比例，如果孩子的總寬度超過了容器寬度（主軸）,然他們按比例來縮小一定的寬度從而可以在容器中裝下。
5.flex-basis
分配空白之前，子項(xiàng)的寬度，默認(rèn)是 `auto`，也就是孩子本身的寬度。
6.flex
flex屬性是flex-grow,flex-shrink和flex-basis的簡(jiǎn)寫，容器的分配比例（推薦使用）
常用：
1）父盒子聲明flex布局；（假設(shè)沒有設(shè)置布局方向，默認(rèn)水平布局）
display:flex;
兼容性寫法：
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
設(shè)置主軸（水平方向）對(duì)齊方式
justify-content：space-between；
設(shè)置交叉軸（垂直方向）對(duì)齊方式
align-items：center;
2)子盒子
父盒子分配比例：
flex:1；
兼容性寫法：
.flex-1{ -webkit-box-flex:1; ?-webkit-flex:1; ?-ms-flex:1; ?flex:1;}
也可以直接設(shè)置width固定寬度，剩余盒子按比例分配。
