1.
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
row | 行, 水平(默认值) |
column | *列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
flex-direction:column;
修改完毕,主轴是Y轴, 侧轴是X轴。
2.弹性盒子换行
特性: 给父亲添加了 display: flex; 所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。
弹性盒子换行显示 : flex-wrap: wrap;
\
3 设置侧轴对齐方式
- 此处设置侧轴多行的垂直对齐方式。 align-content(少)
- 和前面学过的
align-items(侧轴单行垂直对齐) (多) - align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
- content 主轴 justify-content align-content 侧轴多行对齐
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |