Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

Flexbox 是基于“主轴”（main axis）和“交叉轴”（cross axis）来进行布局的。主要涉及以下两个部分：

1. 容器（Parent Container）：添加 display: flex; 的元素，它称为 Flex 容器。
2. 项目（Flex Items）：直接位于 Flex 容器内的子元素。

容器属性

Flex 容器上的属性可以控制其子元素如何排列：

display：启用 Flexbox 布局。

.container {
    display: flex;
}

flex-direction：设置主轴的方向（子元素排列方向）。

• row（默认）：水平从左到右
• row-reverse：水平从右到左
• column：垂直从上到下
• column-reverse：垂直从下到上

.container {
    flex-direction: row;
}

justify-content：设置主轴方向上项目的对齐方式。

• flex-start（默认）：从起点对齐
• flex-end：从终点对齐
• center：居中对齐
• space-between：均匀分布，首尾不留空隙
• space-around：均匀分布，首尾留空隙

.container {
    justify-content: space-between;
}

align-items：设置交叉轴方向上项目的对齐方式。

• stretch（默认）：拉伸填充容器
• flex-start：交叉轴起点对齐
• flex-end：交叉轴终点对齐
• center：交叉轴居中
• baseline：基线对齐

.container {
    align-items: center;
}

flex-wrap：控制子元素是否换行。

• nowrap（默认）：不换行
• wrap：子元素超过容器宽度时换行
• wrap-reverse：换行并倒序排列

.container {
    flex-wrap: wrap;
}

项目属性

Flex 项目上的属性可以控制其在容器内的布局方式：

flex: 控制缩放和初始大小

• 单值语法：值必须是以下之一：
  • 一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0。
  • 一个 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
  • 关键字 none 或者全局关键字之一。
• 双值语法：
  • 第一个值必须是一个 <flex-grow> 的有效值。
  • 第二个值必须是以下之一：
    • 一个 <flex-shrink> 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。
    • 一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。
• 三值语法：值必须按照以下顺序指定：
  • 一个 <flex-grow> 的有效值。
  • 一个 <flex-shrink> 的有效值。
  • 一个 <flex-basis> 的有效值。

flex-grow：定义项目在剩余空间中的放大比例。

• 默认值为 0，表示不放大。

flex-shrink：定义项目在空间不足时的缩小比例。

• 默认值为 1，表示项目会缩小。

flex-basis：定义项目的初始大小。

• 可以是具体大小（如 200px）或 auto。

.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

align-self：覆盖 align-items 设置，为单独的子元素设置对齐方式。 align-self: flex-end;