display: flex作用

`display: flex` 是 CSS 中的一个属性，它用于将一个元素设置为弹性容器，使其子元素能够灵活地排列和对齐。具体来说，`display: flex` 会使当前元素的子元素成为弹性项目，从而可以通过设置弹性项目的属性来控制它们的排列方式、尺寸和间距等。

使用 `display: flex` 可以实现许多常见的布局需求，比如水平居中、垂直居中、等高布局、两端对齐等。

例如，下面的代码将一个 `div` 元素设置为弹性容器，并将其中的三个子元素水平居中：

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

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

.item {
  margin: 0 10px;
}

其中，`.container` 元素设置了 `display: flex`，成为了弹性容器，同时通过 `justify-content: center` 属性将弹性项目水平居中。`.item` 元素则设置了一些间距，以便更好地展示效果。