# 重新认识 Flex 布局
![]()
# 常见属性
# flex-direction 设置主轴方向
| 属性值 | 说明 |
|---|
| row | 默认值；从左往右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
也就是盒子排列顺序
# justify-content 设置主轴排列方式⭐
| 属性值 | 说明 |
|---|
| flex-start | 靠左 |
| flex-end | 靠右 |
| space-between ⭐ | 两边贴边，在平分剩余空间 |
| center⭐ | 居中 |
| spac-around⭐ | 平分间隔 |
# flex-warp 是否换行
1
2
| flex-warp:warp//换行
flex-warp: nowarp //不换行
|
# align-items 设置侧轴元素排列方向（适合单行）
| 属性值 | 说明 |
|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中 |
| stretch | 拉伸 |
用两个主侧轴排列方向实现垂直居中 (适合在单行的时候使用)
1
2
3
| justify-content:center
align-items:center
|
align-content 设置侧轴元素排列方向（适合多行）单行没有效果
| 属性值 | 说明 |
|---|
| flex-start | 靠左 |
| lex-end | 靠右 |
| space-between ⭐ | 两边贴边，在平分剩余空间 |
| center⭐ | 居中 |
| spac-around⭐ | 平分间隔 |
# flex-flow 是 flex-direction 和 flex-warp 的符合属性
# flex 属性
可以设置父元素分成多少份，子元素占多少份
# align-self 设置某个子盒子的排列方式
order 属性，定义项目的排列顺序，数值越小越靠前
