CSS flex 布局
flex-direction
决定主轴方向
row,row-reverse,colum,colum-reverse
flex-wrap
是否换行
nowrap,wrap,wrap-reverse
flex-flow
flex-direction属性和flex-wrap属性的简写形式
justify-content
对齐方式
flex-start,flex-end,center,space-between,space-around
align-items
在交叉轴上的对齐方式
flex-start,flex-end,center,baseline,stretch
align-content
定义多根轴线的对齐方式
flex-start,flex-end,center,space-between,space-around,stretch
flex-basis
flex-basis: number|auto|initial|inherit;
flex-basis设置弹性项目的初始长度。
| 值 | 描述 |
|---|---|
| number | 长度单位或百分百，规定弹性项目的初始长度。 |
| auto | 默认值。长度等于弹性项目的长度。如果该项目未规定长度，则长度将依据其内容。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
flex-grow
flex-grow: number|initial|inherit;
flex-grow属性规定在相同的容器中，项目相对于其余弹性项目的增长量。
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
flex-shrink
flex-shrink: number|initial|inherit;
flex-shrink属性规定当项目溢出时，按比例对所有项目进行空间收缩。
| 值 | 描述 |
|---|---|
| number | 一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。 |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |