主轴方向
目标:使用flex:direction改变元素排列方向
- 主轴默认是水平方向,侧轴默认是垂直方向
- 修改主轴方向属性:flex:direction
属性值 | 作用 |
---|---|
row | 行,水平(默认) |
column | 列,垂直 |
row-reverse | 行,从右到左 |
column-reverse | 列,从下到上 |
弹性盒子换行
目标:使用flex-wrap实现弹性盒子多行排列效果
- 弹性盒子换行显示语法:flex-wrap:wrap
- 调整行对齐方式:align-content(取值与justify-content基本相同)