Flex 布局 - 容器

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

更多精彩

• 更多技术博客，请移步 asing1elife's blog

概念

1. 采用 Flex 布局的元素称为 Flex 容器
2. 容器下的所有子元素自动成为容器成员，成为 Flex 项目
3. 将元素的 display: flex 即可指定 Flex 容器

4. 容器默认存在两根轴，水平的主轴和垂直的交叉轴

   
   image

属性

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

• row [default] 主轴在水平方向，起点在左侧

  
  image

• row-reverse 主轴在水平方向，起点在右侧

  
  image

• column 主轴在垂直方向，起点在顶部

  
  image

• column-reverse 主轴在垂直方向，起点在底部

  
  image

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

• nowrap [default] 不换行

  
  image

• wrap 换行，第一行在上方

  
  image

• wrap-reverse 换行，第一行在下方

  
  image

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

• row wrap [default]

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

• flex-start [default] 左对齐

  
  image

• flex-end 右对齐

  
  image

• center 居中

  
  image

• space-between 两端对齐，每个项目之间的间距相等

  
  image

• space-around 每个项目两侧的间隔相等，即项目之间的间隔比项目与容器边框的间隔大一倍

  
  image

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

• stretch [default] 如何项目未设置高度，则每个项目默认占据整个容器高度

  
  image

• flex-start 顶部

  
  image

• flex-end 底部

  
  image

• center 居中

  
  image

• baseline 项目第一行文字的基线对齐

  
  image

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

• stretch [default] 项目占满整个交叉轴

  
  image

• flex-start 与交叉轴的顶部对齐

  
  image

• flex-end 与交叉轴的底部对齐

  
  image

• center 与交叉轴的中部对齐

  
  image

• space-between 与交叉轴的两端对齐，轴线之间的间隔平均分布

  
  image

• space-around 每条轴线两端的间隔相等，即轴线之间的间隔比轴线与边框的间隔要大一倍

  
  image