flex布局换行之后有间隙怎么办？

flex布局换行之后可能会产生额外的间隙，本文以实例的形式给大家演示一下，并给出解决方案。

.container {
    width: 360px;
    height: 300px;
    border: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 100px;
    height: 60px;
    margin: 8px;
    border: 1px solid blue;
}

从上面的例子，我们可以看到，第一行三个 div 和第二行三个 div 之间出现了非常明显的间隙。那么我们要如何控制这种间隙呢？

我们可以使用 align-content: flex-start; 来去除两行 div 之间的间隙。

.container {
    ...
    align-content: flex-start;
}

效果如下：

以上就是 flex 换行布局之间的间隙的处理方法，就写到这里啦。

本文地址：https://www.tides.cn/p_css-flex-line-breaks-with-gaps