flex space-between最后一行对齐问题的解决方案
- 2020 年 2 月 11 日
- 筆記
背景
常见的一个图文列表设计,通常是这样的,两端顶着容器,中间的间距平均分,如下图的某东商品列表的设计:

列表是这样自适应的,当视窗足够放多少个商品就放多少个,然后各个商品项目之间的间距平均分。由于每个人的视窗都可能不同,因此所看到的间距或者每一行的个数都会不同。
方案
想到这种设计,我们学过flex就知道,非常像flex的justify-content: space-between的效果,因此我们自然这样实现:
.flex { list-style: none; margin: 0; padding: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; } .demo1 > .flex__item { flex-basis: 200px; margin-top: 1rem; text-align: center; box-sizing: border-box; } .demo1 > .flex__item img { width: 100%; }
<ul class="flex demo1"> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> </ul>
demo: https://jsbin.com/yulevutodo/edit?html,css,output

我们看到效果,最后一行不正确,应该向左对齐才对,详细比较过多种方案,个人觉得还是增加空白项这种方案最佳,就是往后面多加几个空白项,你至少要放入 最大屏能显示的个数减去1个就行了,当然放得更多也是显示正常的,但是没有必要。
<ul class="flex demo1"> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <li class="flex__item"> <img src="http://via.placeholder.com/100" /> <p> 图片 </p> </li> <!-- placeholder max column * placeholder - 1--> <li class="flex__item placeholder"></li> <li class="flex__item placeholder"></li> <li class="flex__item placeholder"></li> <li class="flex__item placeholder"></li> </ul>
.flex { list-style: none; margin: 0; padding: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; } .demo1 > .flex__item { flex-basis: 200px; margin-top: 1rem; text-align: center; box-sizing: border-box; } .demo1 > .flex__item img { width: 100%; } .placeholder { visibility: hidden !important; height: 0 !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
demo: https://jsbin.com/koyoxupivo/edit?html,css,output

方案研究过程
一看到这种设计,我们真的就会自然而然想到了flex的 justify-content: space-between; 但由于最后一行的对齐问题,让我们头疼。那就不用 justify-content: space-between吧,改用默认的justify-content: flex-start试试,那么靠右的间距就得计算了,如下:
.list2 > .flex__item:nth-of-type(2n + 1) { margin-right: calc((100% - 200px * 2) / 1); } .list3 > .flex__item:not(:nth-of-type(3n)) { margin-right: calc((100% - 200px * 3) / 2); } .list4 > .flex__item:not(:nth-of-type(4n)) { margin-right: calc((100% - 200px * 4) / 3); }
一行放两个项目时用.list2, 放3个项目时用.list3,放4个项目时用.list4等等等,仅仅这种只是做到了间距自适应,项目固定死了,我们想通过media去控制,虽然可以,但是显然比上面复杂多了。如果说外框容器是定死的比如1000px,那么每行的项目数目也是固定的,那可能还稍微好一些。
我们接着想,还不如直接用以前的display: inline-block 或者 float:left去实现呢,但是其实本质上跟 flex-start还是一样的做法。
因此我觉得就只有放空项目方案是最佳的了,维护起来也方便。比如未来项目宽度优200px改成了100px,我们直接把200改成100再检查一下空项目是否放的足够。如果宽度也是自适应了,比如宽度占32%,那把200px改成32%即可,100/32 = 3,因此任何视窗大小下,每行都是3个了,我们空项目只要放 3-1=2个即可。
还有更好的方法吗
毕竟放了空项目,虽然说可以用vue/react等直接循环空项目出来,但还是感觉html还是有点脏。还有更好的方法吗(除了用grid,因为grid的兼容性暂时还不行)?希望告知,感谢!
研究草稿
这个是我研究过程的草稿,比较乱:https://jsbin.com/qobuqakeri/edit?html,css,output