display：flex布局

display: flex 是一种 CSS 布局方式，它可以将一个容器元素的子元素按照一定规则排列和定位。通过 flex 布局可以实现页面布局、水平垂直居中、弹性伸缩等功能。具体来说，使用 display: flex 可以让容器元素成为一个 flex 容器，它的所有子元素将成为 flex 项目。在 flex 布局中，有三个重要的概念：flex 容器、flex 项目和 flex 轴。

- flex 容器：将 display 属性设置为 flex 的元素。
- flex 项目：容器元素的子元素。
- flex 轴：指 flex 容器的主轴和交叉轴。

在 flex 布局中，可以通过设置容器元素的 justify-content 和 align-items 等属性来控制子元素在主轴和交叉轴上的对齐方式和排列方式。此外，flex 布局还支持弹性伸缩，即可以通过设置 flex-grow、flex-shrink 和 flex-basis 等属性来控制子元素在容器内的伸缩比例和基础大小。