Flexbox布局中的项目间间距处理：gap与margin

# 1. 介绍

## 1.1 Flexbox布局简介

Flexbox是一种用于Web布局的技术，它能够让容器中的项目能够以弹性的方式进行布局，以适应不同尺寸的屏幕和设备。

Flexbox布局主要包括以下几个核心概念：

- **Flex容器**：应用`display: flex`或`display: inline-flex`属性的父元素，用于定义一个弹性容器。

- **Flex项目**：Flex容器的子元素，会根据Flex容器的排列方式进行排列。

- **主轴和交叉轴**：Flex容器具有主轴和交叉轴的概念，主轴是项目的排列方向，交叉轴垂直于主轴。

- **弹性布局属性**：通过灵活的弹性属性，如`flex-grow`、`flex-shrink`和`flex-basis`，来控制项目的布局方式。

## 1.2 项目间间距问题背景

在使用Flexbox布局时，通常会遇到项目之间需要增加间距的情况。在CSS3以前，项目间的间距通常会使用`margin`属性实现，但是这种方式在使用Flexbox布局时，会存在一些问题，例如外边距折叠等。因此，为了更好地实现项目间的间距，CSS引入了`gap`属性，同时我们也需要了解在Flexbox布局中如何使用`margin`属性来处理项目间的间距，并比较两者的优劣。

# 2. Flexbox布局基础

Flexbox布局是一种用于页面布局的弹性盒子模型，它在处理项目的排列和对齐方面提供了更强大的功能。在使用Flexbox布局时，需要理解一些基础概念和属性。

### 2.1 主轴和交叉轴

Flexbox布局中的项目排列可以沿着主轴（main axis）和交叉轴（cross axis）进行。主轴是项目的排列方向，可以是水平方向（横向排列）或垂直方向（纵向排列），而交叉轴则和主轴垂直。

### 2.2 Flex容器和Flex项目

在Flexbox布局中，要使用弹性盒子模型，首先需要创建一个Flex容器（Flex container）。可以通过将容器的display属性设置为flex来创建Flex容器，例如：

.container {
  display: flex;
}

Flex容器内的每个子元素都成为Flex项目（Flex item），可以通过设置Flex项目的各种属性来实现对布局的控制。

### 2.3 布局属性：justify-content和align-items

在Flexbox布局中，可以使用justify-content属性来控制Flex项目在主轴上（横向排列时）的对齐方式，可以设置的值包括：flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（平均分布在主轴上）、space-around（平均分布在主轴上，项目之间有间隔）等。

例如，下面的代码将Flex项目在水平方向上居中对齐：

.container {
  display: flex;
  justify-content: center;
}

而align-items属性用于控制Flex项目在交叉轴上（纵向排列时）的对齐方式，可以设置的值包括：flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸填充整个容器等高度）等。

例如，下面的代码将Flex项目在垂直方向上居中对齐：

.container {
  display: flex;
  align-items: center;
}

通过灵活运用这些布局属性，可以轻松实现不同的页面布局效果。

以上是Flexbox布局基础的介绍，下一章节我们将介绍如何解决项目间间距的问题。

# 3. gap属性的引入

在过去的Flexbox布局中，开发人员通常需