display flex提行

`display: flex;` 是 CSS 中的一个布局模式，主要用于创建弹性容器，即所谓的 Flexbox(弹性盒模型)。当你将一个元素的 `display` 属性设置为 `flex` 或者 `-webkit-flex` (针对 Webkit 浏览器如 Safari 和 Chrome)，该元素会转换为其 Flex 容器，并能够控制其内的项目（称为 flex 子项）如何在容器内排列。

在 Flex 容器下，子元素可以自动对齐、换行，以及根据容器的空间动态调整大小。常见的属性有：
- `flex-direction`: 控制主轴的方向（row, row-reverse, column, column-reverse）
- `justify-content`: 横向对齐方式（flex-start, flex-end, center, space-between等）
- `align-items`: 纵向对齐方式（flex-start, flex-end, center, baseline等）
- `flex-wrap`: 是否允许换行(`nowrap`, `wrap`, `wrap-reverse`)

通过组合使用这些属性，你可以创建出高度响应式的布局设计。例如，如果你想让子元素在一行为满时不换行，而在需要时换行，你可以设定 `flex-wrap: wrap;`。