css3 flex

以前用的是box，最新的是flex

display:flex。

display:flex 应用于子集
flex:num 设置元素分配的比例
flex-grow:num 分配剩余空间此元素分配的比例
flex-direction:主轴显示方向 row 默认从左到右 row-reverse 从右到左 column 从向向下 column-reverse 从下向上 
flex-wrap:设置显示多行或单行 nowrap 单行 wrap 一行不够多行 wrap-reverse 反转wrap
flex-flow:direction wrap 复合属性，值是方向值和 wrap值。 两个属性决定了新行堆叠的方向
align-content:当伸缩容器的侧轴还有多余空间时，本属性可以用来调准 flex-start 轴顶对齐 flex-end 轴底对齐 center 居中对齐 stretch高度占满轴
align-items:定义纵轴方向对齐 flex-start 顶对齐 flex-end底对齐 center 居中对齐 baseline 第一行文字的基线对齐 stretch默认纵向占满
justify-content:项目在主轴上的对齐 flex-start 开始对齐 flex-end 结束对齐 center 居中对齐 space-between 平均对齐 左右两端不留空 space-around平均对齐 左右两端留空
align-self:它用于子元素的，用来设置本身的纵轴对齐参数和align-itmes一样。
order:num 用于子元素，设置本身显示时的顺序可以为负，小在前
纵轴：默认flex是行向显示，那么纵轴就是竖向。竖着显示纵轴就是行向。

总结：

常用的几个属性：

flex 设置分配比例

flex-grow:设置剩余空间分配比例

flex-direction:设置排列模式，行向和竖向

flex-wrap 设置溢出多行和溢出行方向

flex-flow 是direction wrap的复合

align-items:纵轴对齐样式，

justify-content: 内容在主轴上的对齐 

主轴就是内容行向或纵向。

纵轴就是方向的侧轴。