说明
- 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>
运行效果：
解释：
主轴方向（水平方向），默认从开始处填充（从左侧填充）
设置
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;
}
运行效果：
设置列间距
#box{
width: 350px;
height: 400px;
background-color: aquamarine;
display: flex;
flex-wrap:wrap;
/* justify-content: space-between; */
/* 换行时，交叉轴方向，从开始填充 */
align-content: flex-start;
/*---增加代码---*/
/* 设置列间距为20 */
column-gap: 20px;
}
运行效果：
gap简写
一个值
同时设置行、列间距为相同值
#box{
width: 350px;
height: 400px;
background-color: aquamarine;
display: flex;
flex-wrap:wrap;
/* justify-content: space-between; */
/* 换行时，交叉轴方向，从开始填充 */
align-content: flex-start;
/*---增加代码---*/
/* 同时设置行、列间距为10 */
gap: 10px;
}
运行效果：
两个值
- 第1个值设置行间距
- 第2个值设置列间距
#box{
width: 350px;
height: 400px;
background-color: aquamarine;
display: flex;
flex-wrap:wrap;
/* justify-content: space-between; */
/* 换行时，交叉轴方向，从开始填充 */
align-content: flex-start;
/*---增加代码---*/
/* 设置行间距为10，列间距为20 */
gap: 10px 20px;
}
运行效果：
参考：
https://zhuanlan.zhihu.com/p/644782484
https://geek-docs.com/css/css-ask-answer/597_css_spacing_between_flexbox_items.html