CSS Flexbox（弹性盒子模型）是一种用于创建灵活布局的 CSS 布局模式。它允许开发者在多个方向上对齐和排列元素，使得布局更为灵活和高效。Flexbox 可以适应不同的屏幕尺寸和设备类型，提高了页面的响应性。
下面是关于 Flexbox 的基本概念和一些关键属性的解释：
### 基本概念
* **容器（Container）与项目（Items）**：在 Flexbox 中，包含子元素的元素称为容器（Container），容器内的子元素称为项目（Items）。
* **主轴（Main Axis）与交叉轴（Cross Axis）**：主轴是 Flex 项目排列的方向，交叉轴是与主轴垂直的方向。你可以通过 `flex-direction` 属性来设置主轴的方向。
### 关键属性
1. **flex-direction**：决定主轴的方向，可选值有 `row`（水平方向）、`row-reverse`（水平方向反向）、`column`（垂直方向）和 `column-reverse`（垂直方向反向）。
2. **flex-wrap**：控制 Flex 项目是否换行。可选值有 `nowrap`（不换行）、`wrap`（换行）和 `wrap-reverse`（反向换行）。
3. **justify-content**：用于在主轴上对齐 Flex 项目，可选值有 `flex-start`、`flex-end`、`center`、`space-between`、`space-around` 和 `space-evenly`。
4. **align-items**：用于在交叉轴上对齐 Flex 项目，可选值有 `stretch`、`flex-start`、`flex-end`、`center` 和 `baseline`。
5. **flex-flow**：是 `flex-direction` 和 `flex-wrap` 的简写属性，用于同时设置这两个属性。
### 项目属性
* **flex**：是 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写，用于设置项目的放大比例、缩小比例和基础长度。
* **align-self**：允许单个项目覆盖默认的 `align-items` 对齐方式。
### 应用示例
下面是一个简单的 Flexbox 布局示例：
```html
```
在这个例子中，我们创建了一个包含三个项目的容器，通过设置 `flex-direction: row;` 和 `justify-content: space-between;` 使项目在水平方向上分布且保持间距。通过设置 `.item` 的 `flex` 属性为 `1`，我们确保每个项目的基础长度相等。这只是一个简单的示例，Flexbox 布局非常灵活，你可以创建各种复杂的布局结构。