如果想快捷的使用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）主軸長度（main size）：伸縮項(xiàng)目在主軸方向上的寬度或者高度就是項(xià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è)軸長度（cross size）：伸縮項(xiàng)目在側(cè)軸方向上的寬度或者高度就是項(xiàng)目的側(cè)軸長度。
容器是父級(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的簡寫熏纯，容器的分配比例（推薦使用）
常用：
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固定寬度叮盘，剩余盒子按比例分配秩贰。
