display:flex ;

"display: flex;" 是一种 CSS 属性，用于指定元素应该使用弹性布局。使用弹性布局可以使得元素更加灵活、响应式，并且可以轻松地实现水平居中、垂直居中、等高布局等效果。

当一个元素的 display 属性被设置为 flex 时，该元素就成为了 flex 容器，它的所有子元素都成为了 flex 项目。在 flex 容器中，可以通过设置 flex-direction、justify-content、align-items 等属性来控制 flex 项目的排列方式和对齐方式。

例如，以下代码将一个父元素设置为 flex 容器，子元素设置为 flex 项目，并将它们垂直居中：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

.parent {
  display: flex;
  align-items: center;
}
.child {
  margin: 10px;
}