display: flex固定宽度

`display: flex` 是 CSS 中的一种布局模式，它主要用于创建响应式、灵活的网格布局。当应用于某个容器元素（比如 `div`）时，会使其内的子元素在水平方向上成为弹性布局，可以自动调整空间分配。

- **基本语法**：将 `display` 属性设置为 `flex` 或者 `inline-flex`。

.container {
  display: flex;
}

- **主要特点**：
- **主轴对齐**：通过 `align-items` 控制垂直方向的对齐，如 `center`, `flex-start`, `flex-end` 等。
- **交叉轴对齐**：通过 `justify-content` 控制水平方向的对齐，如 `start`, `center`, `end`, `space-between` 等。
- **自适应宽度**：如果你设置了固定宽度，`flex-shrink` 和 `flex-grow` 可以控制元素在剩余空间的收缩和扩张。
- **单行或多行布局**：默认下，`flex-wrap: wrap` 让元素换行，如果不需要换行则设为 `nowrap`。