flex布局子容器调整间距

Flex布局是一种用于创建弹性网格系统的CSS布局模型，它允许子元素在主轴方向上动态分配空间，以便适应容器的变化。如果你想要调整flex布局子容器之间的间距，可以使用以下几种方法：

1. **`gap`属性**：从Flexbox 2开始引入的新特性，可以同时设置行间Gap(`gap-between`)和列间Gap(`gap-start`, `gap-end`). 例如：

   .container {
     display: flex;
     gap: 10px; /* 设置默认间距 */
   }

2. **`justify-content` 和 `align-items` 属性**：虽然不是直接针对间隙的，但你可以通过改变这两个属性来间接影响子元素间的间距。比如：
- 如果想让元素均匀分布并且留有间隔，可以设置`justify-content: space-between` 或 `space-around`；
- 如果只想调整一行或一列的间隔，可以调整`align-self`。

3. **`margin` 或 `padding`**：传统的CSS margin和padding也可以用来设置子元素间的距离，但这不会影响flex布局的整体结构。

4. **伪元素**：利用`:before`或`:after`伪元素，可以在每个子元素前面或后面添加额外的空间。