Flexbox（弹性盒布局）是一种用于布局的 CSS 模型，这也是最常使用的模型。我们通过 display: flex 来将其容器设置为 flex 布局，那么它的子元素就会根据布局进行对齐。

布局基础

flex 布局中有主轴和 交叉抽 ，交叉轴是垂直于主轴的。

主轴：`flex-direction`

（1）flex-direction: row 主轴会沿着行方向进行延伸，如果想从右到左，可以设置为 row-reverse 。

（2）flex-direction: column 主轴会沿着列方向进行延伸，如果想从下到上，可以设置为 column-reverse。

起始线和终点线

这里要说明的是，flexbox 和书写模式的关系，也是为什么不用上下左右来进行描述的原因。

假设在 flex-direction: row 的情况下，书写英文，因为英文默认的书写方式是从左到右的，所以主轴的起始线为左，终止线为右。

如果书写阿拉伯文，因为阿拉伯文的书写模式是从右到左的，所以主轴的起始线为右，终止线为左。

多行 flex 容器

如果运行容器进行换行，那么可以使用 flex-wrap 属性。我们设置 flex-wrap: wrap 后，子项目会换行显示；设置 flex-wrap: nowarp 时，会缩小以适应容器。

flex 元素上的属性

为了更好地控制 flex 元素，有三个属性可用：

flex-grow
flex-shrink
flex-basis

这三个属性其实就是改变了 flex 容器的 可用空间（available space）。

`flex-basis`

定义元素的空间大小，默认值为 auto 。

`flex-grow`

flex-grow: 1 表示启用 grow，此时 flex 元素以 flex-basis 为基础，沿主轴方向增长元素。此外，也可用用于按比例分配：第一个元素为 flex-grow: 2 第二个元素和第三个元素为 flex-grow: 1，那么会把剩余空间的 2/4 分给第一个元素，其余元素获得剩余空间的 1/4。

`flex-shirnk`

与 flex-grow 相反，这个属性用来处理缩小。如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素 flex-shrink 属性设置为正整数来缩小它所占空间到 flex-basis 以下。

元素间的对齐和空间分配

Flexbox 的一个关键特性是能够设置 flex 元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。

`align-items`

用于使元素在交叉轴方向对齐。

.container {
  align-items: stretch; /* 默认值，项目被拉伸以填满容器 */
  align-items: flex-start; /* 对齐到交叉轴的起点 */
  align-items: flex-end; /* 对齐到交叉轴的终点 */
  align-items: center; /* 交叉轴上居中对齐 */
  align-items: baseline; /* 项目基线对齐 */
}

`align-content`

用于定义多行项目在交叉轴的对齐方式。

.container {
  align-content: flex-start; /* 对齐到交叉轴的起点 */
  align-content: flex-end; /* 对齐到交叉轴的终点 */
  align-content: center; /* 交叉轴上居中对齐 */
  align-content: space-between; /* 项目之间等间距分布 */
  align-content: space-around; /* 项目周围等间距分布 */
  align-content: stretch; /* 项目被拉伸以填满容器 */
}

`justify-content`

定义项目在主轴上的对齐方式。

.container {
  justify-content: flex-start; /* 默认值，对齐到主轴的起点 */
  justify-content: flex-end; /* 对齐到主轴的终点 */
  justify-content: center; /* 主轴上居中对齐 */
  justify-content: space-between; /* 项目之间等间距分布 */
  justify-content: space-around; /* 项目周围等间距分布 */
  justify-content: space-evenly; /* 项目之间及边缘等间距分布 */
}

布局基础

主轴：flex-direction

起始线和终点线

多行 flex 容器

flex 元素上的属性

flex-basis

flex-grow

flex-shirnk