flex布局

Posted 2020-12-25 maoriaty

设置flex布局：

display: flex;

容器属性：

1. flex-direction  // 主轴方向，row,column
2. justify-content // 主轴方向排列方式，如：spance-around,spance-between,flex-start,flex-end,center
3. align-items // 用于主轴交叉轴方向对齐方式，如：等高stretch,flex-start,flex-end,center,baseline
4. flex-wrap  // 主轴换行，nowrap,wrap
5. flex-flow  // flex-direction和flex-wrap的简写
6. align-content  // 多轴对齐方式，flex-start,flex-end,center,spance-between,spance-around,strtch

项目属性：

1. order  // 项目排列顺序
2. flex-grow  // 项目放大比例，用于剩余空间的划分，如：某个项目flex-grow: 1;则这个项目实际大小为原来大小加上剩余空间大小，即填充满整行或整列
3. flex-shrink  // 项目缩小比例，剩余空间的划分
4. flex-basis  // 定义项目占据主轴空间大小
5. flex  // flex-grow,flex-shrink,flex-basis的简写
6. align-self  // 单个项目，在交叉轴上的排列方式，如：某个项目align-self: flex-end,即这个项目底部对齐排列