display: flex什么意思

display: flex是CSS中的一个属性，它用于创建一个弹性盒子（flexbox）布局。当将该属性应用于一个元素时，该元素将成为一个容器，其内部的子元素将按照一定的规则进行排列和布局。

使用display: flex可以实现以下效果：
1. 子元素的水平排列：子元素默认会水平排列在容器中，如果容器的宽度不足以容纳所有子元素，则会自动换行。
2. 子元素的垂直对齐：子元素可以通过设置align-items属性来实现垂直对齐，例如居中对齐或底部对齐。
3. 子元素的间距和顺序：可以通过设置justify-content属性来控制子元素之间的间距和顺序，例如居中对齐、两端对齐或等间距排列。

下面是一个使用display: flex的示例代码：

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

.flex-item {
  margin: 10px;
  padding: 20px;
  background-color: lightgray;
}
</style>

<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类被应用于一个div元素，该div元素成为了一个弹性容器。内部的三个div元素（flex-item类）将按照水平方向居中排列，并且之间有一定的间距。