Flex

Flex

父容器

flex-direction

决定着主轴的方向，交叉轴是主轴逆时针旋转得到的

row | row-reverse | column | column-reverse

row: 默认值， 起点在左边，指向右边
row-reverse: 起点在右边指向左边
column: 起点在上边，指向下面
column-reverse: 起点在下面指向上面

flex-wrap

在轴线上换行方式

nowrap | wrap | wrap-reverse

nowrap: 默认值 不换行，显示不完会截取掉
wrap: 换行，第一行在上方
wrap-reverse: 换行， 第一行在下方

flex-flow

是指flext-direction 和flex-wrap的简称
flex-flow: row nowrap

justify-content

定义了子容器在主轴上如何排列的

flex-start | flex-end | center | space-between | space-around

flex-start: 往主轴的指向排列
flex-end: 往主轴指向的相反方向排列
flex-center: 从主轴的中间像两边排列
space-bwtween: 主轴两侧排列，子容器间留有相等距离
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

子容器

order

排列顺序

1，2，3....

flex-grow

定义项目的放大比例，默认为零，就是指有剩余空间也不进行发大，若子容器flex-grow都设为1将等分剩余空间

flex-shrink

项目的缩小比例，默认为1，指的是空间不足时等比缩小，若设为0则不缩小

flex-basic

项目占据主轴的空间，默认值auto

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

auto | flex-start | flex-end | center | baseline | stretch