设置弹性布局
display: -webkit-flex;
display: flex;
设置子元素方向
-webkit-flex-direction
flex-direction: row横向从左到右
flex-direction: row-reverse 横向从右到左
flex-direction: column纵向从上到下
flex-direction: column-reverse纵向倒排
对齐方式
-webkit-justify-content
justify-content: flex-start 正常排序
justify-content: flex-end右对齐
justify-content: center居中
justify-content: space-between间隔分布，最外边没有间距
justify-content: space-around间隔分布，最外边有间距
纵轴对齐方式
-webkit-align-items
align-items: flex-start 上对齐
align-items: flex-end 下对齐
align-items: center 居中对齐
align-items: baseline 基线对齐
align-items: stretch高度撑满
子元素换行方式
-webkit-flex-wrap
flex-wrap: nowrap 单行显示
flex-wrap: wrap 多行显示
flex-wrap: wrap-reverse 倒序显示
flex-wrap: initial 初始化
flex-wrap: inherit; 继承父
设置各个行的对齐
align-content: flex-start向上靠齐
align-content: flex-end 向下靠齐
align-content: center 中间靠齐
align-content: space-between平均分布两端没有间距
align-content: space-around平均分布两端有间距
align-content: stretch（默认）平均分配空间
排序
-webkit-order: -1;
order: -1
数值小的排在前面。可以为负值
完美居中
margin: auto;
单个子元素纵轴方向上的对齐
-webkit-align-self
align-self: auto 跟随父元素的'align-items'
align-self: flex-start 向上靠齐
align-self: flex-end 向下靠齐
align-self: center 垂直居中
align-self: baseline 基线对齐
align-self: stretch 高度撑满
子元素分配空间
-webkit-flex
flex: auto 计算值为 1 1 auto
flex: initial 计算值为 0 1 auto
flex: none 计算值为 0 0 auto
