css display flex 间隔

CSS `display: flex` 属性用于创建弹性布局，其中元素会按照一定的规则沿着主轴对齐。当涉及到元素间的间距时，主要有以下几个相关的属性可以控制：

1. **`justify-content`**：这个属性决定了Flex容器内项目如何沿主轴分布。常见的值有 `flex-start`（开始）、`flex-end`（结束）、`center`（居中）、`space-between`（等距分布，项目之间的间隔相等），以及 `space-around`（每个项目两侧都有间隔，总和均匀分布）。

2. **`align-items`**：控制子元素在交叉轴方向上的对齐方式，如 `flex-start`（顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`stretch`（拉伸填满容器）。

3. **`gap` 或 `margin`**：虽然不是专为 Flex 容器设计的，但是通过设置 `margin` 或者利用伪元素（如 `::before` 和 `::after`）并结合 CSS Grid 的 `gap` 属性，也可以间接地调整相邻项目的间距。

4. **`gutter`（仅限于某些框架或自定义解决方案）**：一些前端框架可能会提供 `gutter` 这样的命名，它通常指定了 Flexbox 中的项目间固定的间隔值。

例如，如果你想让 Flex 容器内的项目之间均匀分布，并且上下的空间均等，你可以这么写：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* 如果你想要固定值 */
}