一、容器指定flex布局：
.box{
display:flex;//块级元素设置
}
.box{
display:inline-flex;//行内元素设置
}
.box{
display:-webkit-flex;//webkit内核
display:flex;
}
二、容器的属性
<1>flex-direction(决定主轴的方向，即项目的排列方向)
.box{
flex-direction:row | rowreverse | column | columnreverse
}
row：默认值；主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-revese：主轴为垂直方向，起点在下沿
<2>flex-wrap(如果一条轴线排不下，如何换行)
.box{
flex-wrap:nowrap | wrap | wrap-reverse
}
nowrap：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
<3>flex-flow(flex-direction和flex-wrap的组合;默认值row nowrap)
.box{
flex-flow:<flex-direction> || <flex-wrap>
}
<4>justify-content（项目在主轴上的对齐方式）
.box{
justify-content:flex-start | flex-end | center | baseline | stretch
}
flex-start：左对齐(默认值)
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目之间间隔相等
space-around：项目两侧间隔相等
<5>align-items（在交叉轴上如何对齐）
.box{
align-items:flex-start | flex-end | center | baseline | stretch
}
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：第一行文字基线对齐
stretch：默认值，占满容器
<6>align-content
.box{
align-content:flex-start | flex-end | center | space-between | space-around | stretch
}
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch：默认值；轴线占满整个交叉轴