1.flex-wrap: wrap;之后 第二行和第一行会产生一个比较大的空白间距,如下图:
代码如下:
1.1 大家可以看到,我的父元素的高是600,这个是flex的一个特性,我的一个卡片的高度是150,换行之后两行卡片会平分600的高度,大家可以看一下卡片的高度加上空白的高度 正好是600,这个时候只要改变高度就会把中间这个空白距离减少如下图:
1.2 大家看到我把高度改到了四百 中间空白间距就变少了,但是这样做对样式改变有点大,如果是对父元素高度没要求的情况下可以使用,但是有要求的话还是尽量不要用这个,可以使用第二种方法:
2.不改变高度的情况下,消除间距
2.1 很简单,一行代码的事情。 align-content: flex-start; 看下图:
2.2 大家可以看到,我没有改变父元素的高度,只是加了一行代码,其效果是和改变父元素高度产生的结果是一样的,看下图:
3. 总结
两种方法都可以使用,对父元素高度没要求可以该高度即可,如果有要求的话还是第二种方法比较
好。