网页设计 display: flex;

`display: flex;` 是 CSS 布局模型中的一种，用于创建灵活的、响应式的网页布局，特别适合于那些需要在不同设备和屏幕尺寸下保持良好可视性的布局。当应用于一个元素的 `display` 属性时，它会启用弹性盒布局（Flexbox），这种布局方式主要特点有：

1. **主轴和侧轴**：默认情况下，主轴是水平的，称为 "row"，而侧轴是垂直的，称为 "column"。你可以通过 `flex-direction` 属性改变主轴方向。

2. **弹性容器**：应用 `display: flex;` 的元素称为弹性容器，它的子元素称为 Flex 元素。

3. **伸缩空间（Flex Item）**：Flex 元素默认会沿主轴均匀分配空间，通过 `flex: 1` 可以使它们等比例地扩展或收缩。

4. **对齐方式**：使用 `justify-content`, `align-items`, 和 `align-self` 属性控制项目在主轴和侧轴上的对齐方式。

5. **顺序和排列**：通过 `order` 属性调整Flex项目的显示顺序，`flex-wrap` 属性则决定项目是否换行。

6. **响应式设计**：Flexbox 可以轻松处理不同屏幕大小下的布局调整，适应移动设备。

相关问题--
1. 如何使用 `display: flex;` 实现元素的水平居中？
2. `flex-wrap` 属性的作用是什么？
3.