一.概念
是Flexible Box的缩写，即为“弹性布局”，用来为盒装模型提供最大的灵活性。
二.内容
父组件属性
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:每个项目两侧间隔相等
.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:如果项目未设置高度或设为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：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
（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://08643.cn/p/4290522e1560
