Flex 布局

作用

  • 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
  • Flex布局非常适合结构化布局

设置方式

父元素添加 display: flex，子元素可以自动的挤压或拉伸

组成部分

  • 弹性容器
  • 弹性盒子
  • 主轴
  • 侧轴 / 交叉轴

主轴对齐方式

使用justify-content调节元素在主轴的对齐方式

| 属性值 | 作用 |
| — | — |
| flex-start | 默认值, 起点开始依次排列 |
| center | 沿主轴居中排列 |
| flex-end | 终点开始依次排列 |
| space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |

使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

  • align-items（添加到弹性容器）
  • align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

| 属性值 | 作用 |
| — | — |
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器 |

使用flex-direction改变元素排列方向

| 属性值 | 作用 |
| — | — |
| row | 行, 水平(默认值) |
| column | * 列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |

使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap;