css3 flex布局 justify-content:space-between 最后一行左对齐

原创已于 2025-11-24 21:12:29 修改 · 595 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css3 #前端 #javascript

收录于

于 2023-12-09 18:07:10 首次发布

文章介绍了如何使用CSS中的百分比计算来设置列表中最后一行元素的margin-right，针对不同数量的元素（如一行三个或四个），计算公式以适应自适应布局。

一行三个的情况：

.list1  li:last-child:nth-child(3n + 2) {
  margin-right: calc((100% - 你的每个li的宽度可以是固定px也可以是百分比) / 2);
}

一行四个的情况：

.list2  li:last-child:nth-child(4n + 2) {
  margin-right: calc((100% - 你的每个li的宽度可以是固定px也可以是百分比) / 3 * 2);
}
.list2  li:last-child:nth-child(4n + 3) {
  margin-right: calc((100% - 你的每个li的宽度可以是固定px也可以是百分比) / 3 * 1);
}

2025.11.24不知道为什么上面的不能用了，我又复制了一份

.item:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}
.item:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}