Flex 布局 - 容器

Flex 是 Flexible Box 的缩写,就是弹性布局,可以为盒子模型提供更大的灵活性
任何一个容器都可以指定为 Flex 布局,其将会成为未来布局的首选方案

概念

  1. 采用 Flex 布局的元素称为 Flex 容器
  2. 容器下的所有子元素自动成为容器成员,成为 Flex 项目
  3. 将元素的 display: flex 即可指定 Flex 容器
  4. 容器默认存在两根轴,水平的主轴和垂直的交叉轴

属性

flex-direction 决定主轴的方向,即项目的排列方向

  • row [default] 主轴在水平方向,起点在左侧
  • row-reverse 主轴在水平方向,起点在右侧
  • column 主轴在垂直方向,起点在顶部
  • column-reverse 主轴在垂直方向,起点在底部

flex-wrap 当一条轴线上无法排列所有子项,规定换行规则

  • nowrap [default] 不换行
  • wrap 换行,第一行在上方
  • wrap-reverse 换行,第一行在下方

flex-flow 是 flex-direction 和 flex-wrap 的简写形式

  • row wrap [default]

justify-content 定义项目在容器主轴上的对齐方式

  • flex-start [default] 左对齐
  • flex-end 右对齐
  • center 居中
  • space-between 两端对齐,每个项目之间的间距相等
  • space-around 每个项目两侧的间隔相等,即项目之间的间隔比项目与容器边框的间隔大一倍

align-items 定义项目在容器交叉轴上的对齐方式

  • stretch [default] 如何项目未设置高度,则每个项目默认占据整个容器高度
  • flex-start 顶部
  • flex-end 底部
  • center 居中
  • baseline 项目第一行文字的基线对齐

align-content 定义多条轴线的对齐方式,若容器只有一条轴线或容器没有多余空间,则不起作用

  • stretch [default] 项目占满整个交叉轴
  • flex-start 与交叉轴的顶部对齐
  • flex-end 与交叉轴的底部对齐
  • center 与交叉轴的中部对齐
  • space-between 与交叉轴的两端对齐,轴线之间的间隔平均分布
  • space-around 每条轴线两端的间隔相等,即轴线之间的间隔比轴线与边框的间隔要大一倍