弹性布局（Flexbox）是一种用于在容器内分配和对齐项目的一维布局方法。它旨在提供一种更加有效的方式来排列、对齐和分配在容器中的项目，即使它们的大小是未知的或者是动态变化的。弹性布局的规则主要包括以下几个方面：
容器和项目
首先，我们需要明确弹性布局中的两个基本概念：容器和项目。
- 容器：使用 `display: flex;` 或 `display: inline-flex;` 属性声明的元素称为弹性容器。
- 项目：容器的直接子元素会自动成为弹性项目。
主轴和交叉轴
弹性布局中的布局是相对于主轴和交叉轴来进行的。
- 主轴：弹性容器的主轴是弹性项目的主要布局方向。可以是水平方向（默认）或垂直方向。
- 交叉轴：垂直于主轴的轴称为交叉轴。
容器的属性
容器有许多属性可以控制其内部项目的布局方式：
- flex-direction：定义了主轴的方向。
- `row`（默认值）：主轴为水平方向，起点在容器的左端。
- `row-reverse`：主轴为水平方向，起点在容器的右端。
- `column`：主轴为垂直方向，起点在容器的顶端。
- `column-reverse`：主轴为垂直方向，起点在容器的底端。
- flex-wrap：定义如果一行不足以放下所有项目，是否换行。
- `nowrap`（默认值）：所有项目都在一行显示。
- `wrap`：项目多到一行放不下时，会换行。
- `wrap-reverse`：换行，但是第一行在下面。
- justify-content：定义了项目在主轴上的对齐方式。
- `flex-start`：项目在主轴的起始位置对齐。
- `flex-end`：项目在主轴的结束位置对齐。
- `center`：项目在主轴上居中对齐。
- `space-between`：项目在主轴上均匀分布，两端对齐。
- `space-around`：项目在主轴上均匀分布，每个项目两侧的间隔相等。
- align-items：定义了项目在交叉轴上如何对齐。
- `stretch`（默认值）：项目拉伸以填满容器的高度或宽度。
- `flex-start`：项目在交叉轴的起始位置对齐。
- `flex-end`：项目在交叉轴的结束位置对齐。
- `center`：项目在交叉轴上居中对齐。
- `baseline`：项目在交叉轴上按照它们的基线对齐。
- align-content：定义了多行之间的空间分配和对齐方式。
- 当只有一行时，该属性不起作用。
- `flex-start`、`flex-end`、`center`、`space-between`、`space-around`、`stretch`。
项目的属性
项目也有一些属性来控制其在容器中的位置和大小：
- order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。
- flex-grow：定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
- flex-shrink：定义项目的缩小比例，默认为1，即空间不足时，项目将等比例缩小。
- flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。
- flex：是 `flex-grow`, `flex-shrink` 和 `flex-basis` 的简写，默认值为 `0 1 auto`。
- align-self：允许单个项目有与其他项目不一样的对齐方式，可以覆盖 `align-items` 属性。
弹性布局的这些规则为我们提供了一种强大的布局方式，使得在响应式设计中能够更加灵活地处理页面布局，大大提高了前端开发的效率和页面性能。