flex：元素以弹性盒子布局的形式显示，可以通过flex-direction、justify-content等属性控制子元素的排列方式。,你说的这段话是什么意思，可以举例子吗

当一个元素的 `display` 属性设置为 `flex` 时，这个元素就成为了一个弹性容器。弹性容器内的子元素就可以按照一定的规则排列，这个规则就是弹性盒子布局。

弹性布局的主要特点是可以在不同的屏幕大小和设备上自适应调整布局，使得页面的排版更加灵活和方便。

以下是一些常用的弹性布局属性及其作用：

- `flex-direction`：控制子元素的排列方向。默认值为 `row`，表示横向排列；还可以设置为 `column`（纵向排列）、`row-reverse`（横向反向排列）或 `column-reverse`（纵向反向排列）。

.container {
  display: flex;
  flex-direction: column;
}

- `justify-content`：控制子元素在弹性容器中的水平对齐方式。默认值为 `flex-start`，表示左对齐；还可以设置为 `center`（居中对齐）、`flex-end`（右对齐）、`space-between`（两端对齐，子元素之间的间隔相等）或 `space-around`（两端对齐，子元素周围的间隔相等）。

.container {
  display: flex;
  justify-content: center;
}

- `align-items`：控制子元素在弹性容器中的垂直对齐方式。默认值为 `stretch`，表示拉伸对齐；还可以设置为 `flex-start`（顶部对齐）、`center`（居中对齐）、`flex-end`（底部对齐）或 `baseline`（基线对齐）。

.container {
  display: flex;
  align-items: center;
}

- `flex-wrap`：控制子元素是否换行。默认值为 `nowrap`，表示不换行；还可以设置为 `wrap`（换行，第一行在上方）或 `wrap-reverse`（换行，第一行在下方）。

.container {
  display: flex;
  flex-wrap: wrap;
}

- `align-content`：控制多行子元素的垂直对齐方式。默认值为 `stretch`，表示拉伸对齐；还可以设置为 `flex-start`（顶部对齐）、`center`（居中对齐）、`flex-end`（底部对齐）、`space-between`（两端对齐，每行之间的间隔相等）或 `space-around`（两端对齐，每行周围的间隔相等）。

.container {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}

以上是一些常用的弹性布局属性及其作用，可以根据实际需要灵活组合使用。