CSS Flex弹性布局-设置行间距、列间距-马育民老师

# 说明

- row-gap：设置行间距
- column-gap：设置列间距
- gap：是上面两个属性的简写
 - 1个值：表示同时设置行间距、列间距
 - 2个值：第一个值表示设置行间距；第二个值表示设置列间距

# 准备代码

```
<style>
	#box{
		width: 350px;
		height: 400px;
		background-color: aquamarine;
		display: flex;
		flex-wrap:wrap;
		/* 换行时，交叉轴方向，从开始填充 */
		align-content: flex-start;
	}
	.goods{
		width: 80px;
		height: 80px;
		background-color: antiquewhite;
		border: 1px solid red;
	}
</style>
```

```
<div id="box">
	<div class="goods">1</div>
	<div class="goods">2</div>
	<div class="goods">3</div>
	<div class="goods">4</div>
	<div class="goods">5</div>
	<div class="goods">6</div>
	<div class="goods">7</div>
	<div class="goods">8</div>
</div>
```

**运行效果：**

![](https://www.malaoshi.top/upload/0/0/1GWGVLdI5Wn.jpg)

**解释：**

- 主轴方向（水平方向），默认从开始处填充（从左侧填充）

- 设置 `align-content: flex-start;`，表示换行后，交叉轴方向（垂直方向），从开始处填充（从上方填充）

# 设置行间距

```
#box{
	width: 350px;
	height: 400px;
	background-color: aquamarine;
	display: flex;
	flex-wrap:wrap;
	/* justify-content: space-between; */
	/* 换行时，交叉轴方向，从开始填充 */
	align-content: flex-start;
	
	/*---增加代码---*/
	/* 设置行间距为10 */
	row-gap: 10px;
}
```

**运行效果：**

![](https://www.malaoshi.top/upload/0/0/1GWGVQApg61.jpg)

# 设置列间距

/*---增加代码---*/
	/* 设置列间距为20 */
	column-gap: 20px;
}
```

**运行效果：**

[![](https://www.malaoshi.top/upload/0/0/1GWGVkJyNJj.jpg)](https://www.malaoshi.top/upload/0/0/1GWGVkJyNJj.jpg)

# gap简写

### 一个值

同时设置行、列间距为相同值

/*---增加代码---*/
	/* 同时设置行、列间距为10 */
	gap: 10px;
}
```

**运行效果：**

![](https://www.malaoshi.top/upload/0/0/1GWGVnR4LEu.jpg)

### 两个值

- 第1个值设置行间距
- 第2个值设置列间距

/*---增加代码---*/
	/* 设置行间距为10，列间距为20 */
	gap: 10px 20px;
}
```

**运行效果：**

![](https://www.malaoshi.top/upload/0/0/1GWGVrXXpFB.jpg)

参考：
https://zhuanlan.zhihu.com/p/644782484
https://geek-docs.com/css/css-ask-answer/597_css_spacing_between_flexbox_items.html

原文出处：http://malaoshi.top/show_1GWGNWoRJhq.html