html display: flex

display: flex 是 CSS 中的一个属性，用于创建弹性布局flexbox）。它可以让容器中的子元素按照一定的规则自动排列，并且可以根据需要进行伸缩和对齐。

使用 display: flex 的容器称为 flex 容器，而其中的子元素称为 flex 项目。以下是一些关于 display: flex 的重要概念和用法：

1. Flex 容器：
- 使用 display: flex 将一个 容器。
- 默认况下，flex 容器中的子元会水平排列。
- 可以通过设置 flex-direction 属性来改变子元素的排列方向，如 flex-direction: row（水平排列）或-direction: column（垂直排列）。

2. Flex 项目：
- flex 容器中的每个子元素都是一个 flex 项目。
- 默认情况下，flex 项目会根据可用空间自动伸缩。
- 可以使用 flex 属性来控制 flex 项目的伸缩比例。

3. 主轴和交叉轴：
- 在 flex 容器中，主轴是指 flex 项目的排列方向，交叉轴是指与主轴垂直的方向。
- 可以使用 justify-content 属性来控制 flex 项目在主轴上的对齐方式，使用 align-items 属性来控制在交叉轴上的对齐方式。

4. 其他常用属性：
- flex-wrap：控制 flex 项目是否换行。
- align-content：控制多行 flex 项目在交叉轴上的对齐方式。
- align-self：控制单个 flex 项目在交叉轴上的对齐方式。