flex布局
注意
父元素设置display:flex
主轴对齐
相关信息
使用justify-content属性设置主轴对齐
使用align-content设置换行后主轴对齐
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 |
| flex-end | 终点开始 |
| center | 居中排列 |
| space-around | 均匀分布，空白在盒子两侧 |
| space-between | 均匀分布，空白在相邻盒子两侧 |
| space-evenly | 弹性盒子与容器之间距离相等 |
侧轴对齐
提示
使用align-items属性
使用align-self控制单个盒子
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值 |
| flex-end | 终点开始 |
| center | 居中排列 |
| stretch | 默认值 |
主轴方向
相关信息
flex-direction
| 属性值 | 说明 |
|---|---|
| row | 行 |
| column | 列 |
| row-reverse | 行（反） |
| column-reverse | 列（反） |
换行
注意
父元素设置flex-wrap