一.概念
是Flexible Box的縮寫，即為“彈性布局”，用來為盒裝模型提供最大的靈活性。
二.內(nèi)容
父組件屬性
1.flex-direction:決定主軸的方向，有四個值：
（1）row:從左到右
.box{
display:flex;
text-align:center;
flex-direction:row;
}
（2）row-reverse：從右到左
.box{
display:flex;
text-align:center;
flex-direction:row-reverse;
}
(3)column：從上到下
.box{
display:flex;
text-align:center;
flex-direction:column;
}
(4)column-reverse：從下到上
.box{
display:flex;
text-align:center;
flex-direction:column-reverse;
}
2.flex-wrap:如果一條軸線排不下，如何換行。
(1)nowrap：不換行
.box{
display:flex;
text-align:center;
wrap:nowrap;
}
(2)wrap:換行
.box{
display:flex;
text-align:center;
wrap:wrap;
}
（3）wrap-reverse:第二行在下方
.box{
display:flex;
text-align:center;
wrap:wrap-reverse;
}
3.justify-content:定義了項目在主軸上的對齊方式
(1)flex-start:左對齊
.box{
display:flex;
width:100%;
justify-content:flex-start;
}
（2）flex-end:右對齊
.box{
display:flex;
width:100%;
justify-content:flex-end;
}
（3）center:居中
.box{
display:flex;
width:100%;
justify-content:center;
}
(4)space-around:兩端對齊
.box{
display:flex;
width:100%;
justify-content:space-between;
}
（5）space-around:每個項目兩側(cè)間隔相等
.box{
display:flex;
width:100%;
justify-content:space-around;
}
4.align-items:定義項目在交叉軸上如何對齊
(1)flex-start:與交叉軸的起點對齊
.box{
display:flex;
align-items:flex-start;
}
（2）flex-end:與交叉軸的終點對齊
.box{
display:flex;
align-items:flex-end;
}
（3）flex-end:與交叉軸的中點對齊
.box{
display:flex;
align-items:center;
}
（4）baseline:項目的第一行文字的基線對齊
.box{
display:flex;
align-items:baseline;
}
（5）stretch:如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度
.box{
display:flex;
align-items:stretch;
}
5.align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
(1)flex-start:與交叉軸的起點對齊
.box{
background:#CAFF70;
height:600px;
width:500px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
align-content:flex-start;
}
(2)flex-end:與交叉軸的終點對齊
（3）center：與交叉軸的中點對齊
（4）space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布
（5）space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
（6）stretch（默認值）：軸線占滿整個交叉軸
項目的屬性
1.flex-grow:定義項目的放大比例，默認值為0，即如果存在剩余空間，也不放大。
.box{
display:flex;
flex-direction:row;
flex-grow:1;
flex-wrap:wrap;
}
.div1{
background:#E066FF;
margin:10px;
font-size:60px;
flex-grow:5;
}
.div2{
background:#BBFFFF;
margin:10px;
font-size:60px;
}
.div3{
background:#F08080;
margin:10px;
font-size:120px;
flex-grow:4;
}
.div4{
background:#FFC1C1;
margin:10px;
font-size:60px;
}
.div5{
background:#8F8F8F;
margin:10px;
font-size:60px;
flex-grow:3;
}
2.align-self:允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}
參考資料：http://www.itdecent.cn/p/4290522e1560
