任意一个容器都可以设置为flex-box
.box {
display:flex;
}
行级元素也可以设置为flex-box;
.box {
display :inline-flex;
}
注意当给盒子设置成flex后，它的vertical-align,float,clear都将失效
flex-flow属性
这是flex-direction 属性 和flex-wrap 属性的缩写形式，默认值为 row nowrap;
align-items属性
1. stretch : (默认值) 轴线占满整个交叉轴
2. flex-start: 与交叉轴的起点对齐
3. flex-end: 与交叉轴的终点对齐
4. center: 与交叉轴的中点对齐
5. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
6. space-around: 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
align-items
项目属性
1.order属性
它定义了项目的排列顺序(默认值为0)；如果想把一个项目放置最前，只需要把该项目order属性设置为负数
.item {
order: number;
}
2.flex-grow属性
属性定义项目的放大比例（默认值为0）；即使存在剩余空间，也不会放大。
.item {
flex-grow: number;
}
3.flex-shrink属性
属性定义了项目的缩小比例（默认值为1）；即空间不足，项目会被缩小。
.item {
flex-shrink: number;
}
4.flex-basis
分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
5.flex
flex属性是flex-grow flex-shrink flex-basis 的缩写 默认值为 0 1 auto;
6.align-content
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
.item{
align-content: flex-start | flex-end | center | baseline | auto | stretch;
}
align-content
