flex布局使space-between的样式符合要求的两种方法

Posted 2023-03-16

参考技术A 有一种flex的布局比较常见，就是购物网站那种，每个商品是一个卡片，然后从左到右从上到下平铺方形的容器，每个商品卡片之间的间距相等的

也就是方型容器，里面的方型元素按照flex布局，自动铺满，四条边余内部的容器没有间距，中间是相等的间距

使用下面的样式是最接近需求的

但是有一个问题是space-between的效果，间距并不是固定的。当你这一行元素不能铺满（每行元素大于2的时候会出现）的时候，这个间距就会变大，因为元素会往两边跑。不是我们想要的效果。

有两种方法

高度为0，看不见的伪元素

这样当最后一行元素只有一个的时候，加上这个伪元素是两个，就能触发正确的布局。

0个和3个的时候因为伪元素是不可见的也没有高度，对布局不会有影响

只要我们在结尾继续补充宽高相同，但是 visibility 为hidden的元素，做到时刻都是铺满的效果就可以了。

在react里面，每行4个元素的情况下是这样的。

首先我写了一个生成数组的方法

然后我们在渲染节点的末尾，渲染这几个不可见的元素