display:flex

flex:弹性盒子

父元素设置为 ： display:flex;
如果是内联元素可以设置为：display: inline-fiex

属性：

flex-direction ： 设置主轴的方向

1
参数 有  row(设置主轴水平方向起点在左边),row-reverse(设置主轴水平方向，起点在右边),column(设置主轴垂直方向起点在上边),,column-reverse(设置主轴垂直方向起点在下边)

flex-warp： 定义换行情况

1
参数：nowrap （没有任何操作），wrap(换行，第一行在上面)，wrap-reserse（换行，第一行在上面，换行的在上面）

flex-flow 

1
参数：nowrap, flex-direction,flex-wrap

justify-content ： 定义项目在主轴上的对齐方式

1
参数：flex-start（默认，左对齐），flex-end(右对齐)，center(居中)，space-between(两端对齐，中间等距离间隔)，space-around（每个项目之间等宽间隔)

align-item ： 定义交叉轴上的对齐方式

1
参数： flex-start(起点对齐)，flex-end(终点对齐)，center（中点对齐），baseline（基于第一个的第一排文字对齐），stretch(默认，如果项目未设置高度或者设置的auto,将占满整个容器高度)

align-content：定义多跟轴线的对齐方式

1
参数：flex-start(与交叉轴的起点对齐)，flex-end（与交叉轴的终点对齐），center（与交叉轴的中点对齐），space-between(与交叉轴的两端对齐，轴线之间的间隔平均分布)，space-around（每根轴线两端间隔相等，即相邻的会比不相邻的大一倍），stretch（默认值，轴线占满整个交叉轴）

order: 定义项目的排列顺序

1
参数：数值越小，排列越靠前，默认为0，可以是负值。

flex-graw:定义项目的放大比例

1
参数：默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。

flex-shrink：定义项目的缩小比例

1
2
3
参数：默认值都为1，即如果空间不足将等比例缩小。
如果有一个项目的值为0，其他项目为1，当空间不足时，该项目不缩小。
负值对该属性无效，容器不应该设置flex-wrap。

flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。

1
参数： 默认值为auto，浏览器根据此属性检查主轴是否有多余空间。

flex属性是flex-grow，flex-shrink和flex-basis的简写

1
默认值为0 1 auto，第一个属性必须，后两个属性可选。