如何在不改变父元素高度的情况下消除flex-wrap: wrap；产生的间距问题（简单实用 图文解说）

1.flex-wrap: wrap;之后 第二行和第一行会产生一个比较大的空白间距，如下图：

代码如下：

1.1 大家可以看到，我的父元素的高是600，这个是flex的一个特性，我的一个卡片的高度是150，换行之后两行卡片会平分600的高度，大家可以看一下卡片的高度加上空白的高度 正好是600，这个时候只要改变高度就会把中间这个空白距离减少如下图：

1.2 大家看到我把高度改到了四百 中间空白间距就变少了，但是这样做对样式改变有点大，如果是对父元素高度没要求的情况下可以使用，但是有要求的话还是尽量不要用这个，可以使用第二种方法：

2.不改变高度的情况下，消除间距

2.1 很简单，一行代码的事情。 align-content: flex-start; 看下图：

2.2 大家可以看到，我没有改变父元素的高度，只是加了一行代码，其效果是和改变父元素高度产生的结果是一样的，看下图：

3. 总结

两种方法都可以使用，对父元素高度没要求可以该高度即可，如果有要求的话还是第二种方法比较
好。

关注老张不迷路，为你解答更多bug代码小问题