display:flex的用法

display:flex是CSS中用于设置元素的布局方式的属性之一。它被用来创建弹性容器，可以在其中放置弹性项。

使用display:flex的元素将成为一个容器，容器中的子元素将成为弹性项。弹性项可以自动调整大小以填充可用空间，并可以在主轴和交叉轴上根据布局需求进行排列。

要使用display:flex，需要将该属性应用于父容器元素。例如，将以下样式应用于一个div元素：

.container {
  display: flex;
}

这将使`.container`成为一个弹性容器，其中的子元素将按照一定的规则进行布局。

一些常用的属性和值用于调整flex布局，包括：

- `flex-direction`: 设置主轴的方向，可以是`row`（默认，水平方向）、`column`（垂直方向）、`row-reverse`（水平方向反转）或`column-reverse`（垂直方向反转）。
- `justify-content`: 定义沿主轴对齐方式，可以是`flex-start`（默认，左对齐）、`flex-end`（右对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间间隔相等）或`space-around`（每个项目两侧间隔相等，项目之间的间隔是项目与容器边界的间隔的两倍）。
- `align-items`: 定义沿交叉轴对齐方式，可以是`flex-start`（顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`baseline`（基线对齐）或`stretch`（默认，拉伸以适应容器高度）。
- `flex-wrap`: 定义弹性项是否换行，可以是`nowrap`（默认，不换行）或`wrap`（换行）。
- `align-content`: 当有多行或多列的弹性项时，定义它们在交叉轴上的对齐方式，可以是`flex-start`（顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间间隔相等）或`space-around`（每个项目两侧间隔相等，项目之间的间隔是项目与容器边界的间隔的两倍）。