容器属性：
display: 设置是否为flex布局
flex-direction 指定主轴方向 决定项目排列方式
flex-wrap 排列换行设置
flex-flow: flex-direction 和flex-wrap 简写
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在交叉轴上的对齐方式
align-content 定义多根轴线的对齐方式
display:flex | inline-flex
flex 块级flex布局
inline-flex 行内元素的特性
flex-direction :row | row-reverse | colum | colum-reverse
row 主轴水平方向 起点左
row-reverse 主轴水平方向 起点右
colum 主轴垂直方向 起点上
colum-reverse 主轴垂直方向 起点下
flex-wrap: nowrap | wrap | wrap-reverse
nowrap 不换行 默认值
wrap 换行 第一行在上方
wrap-reverse 换行 第一行在下方
flex-flow：<flex-direction> | <flex-wrap>
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap
justify-content： flex-start | flex-end | center | space-between | space-around
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 每个项目两侧的间隔相等
align-items： flex-start | flex-end | center | baseline | stretch
flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中线对齐
baseline 项目根据它们第一行文字的基线对齐
stretch 如果项目未设置高度或设置为auto，项目将在交叉轴方向拉伸填充整个容器，默认值
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center :与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍
stretch：轴线占满整个交叉轴，每个项目会被拉伸直至填满交叉轴，默认值