CSS flex 布局

flex-direction

决定主轴方向 row,row-reverse,colum,colum-reverse

是否换行 nowrap,wrap,wrap-reverse

flex-direction属性和flex-wrap属性的简写形式

对齐方式 flex-start,flex-end,center,space-between,space-around

在交叉轴上的对齐方式 flex-start,flex-end,center,baseline,stretch

定义多根轴线的对齐方式 flex-start,flex-end,center,space-between,space-around,stretch

flex-basis: number|auto|initial|inherit;

flex-basis设置弹性项目的初始长度。

值	描述
number	长度单位或百分百，规定弹性项目的初始长度。
auto	默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

flex-grow: number|initial|inherit; flex-grow属性规定在相同的容器中，项目相对于其余弹性项目的增长量。

值	描述
number	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

flex-shrink: number|initial|inherit; flex-shrink属性规定当项目溢出时，按比例对所有项目进行空间收缩。

值	描述
number	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。