display: flex;

`display: flex;` 是 CSS 中的一个属性，用于创建一个 Flexbox 容器。Flexbox 是一种布局模式，可以方便地创建响应式布局和对齐内容。

使用 `display: flex;` 将元素定义为 Flexbox 容器后，可以使用一系列的 Flexbox 属性来控制它的子元素的排列方式和对齐方式。以下是一些常见的 Flexbox 属性：

- `flex-direction`：用于定义 Flexbox 容器中子元素的排列方向。
- `justify-content`：用于定义子元素在 Flexbox 容器中沿着主轴的对齐方式。
- `align-items`：用于定义子元素在 Flexbox 容器中沿着侧轴的对齐方式。
- `flex-wrap`：用于定义子元素是否可以换行。
- `flex-grow`：用于定义子元素在可用空间中增长的比例。
- `flex-shrink`：用于定义子元素在空间不足时收缩的比例。

以下是一个基本的使用 `display: flex;` 创建 Flexbox 容器的示例：

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  margin: 10px;
  padding: 10px;
  background-color: #eee;
}

在上面的示例中，`.flex-container` 被定义为 Flexbox 容器，`.flex-item` 是其子元素。通过 `display: flex;`，子元素会在 Flexbox 容器中排列。在上面的 CSS 样式中，为子元素添加了一些基本样式。您可以根据需要自定义这些样式。