一、justify-content对齐问题描述

在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。
但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。
如下代码：

  1. 1. .container {
  2. 2. display: flex;
  3. 3. justify-content: space-between;
  4. 4. flex-wrap: wrap;
  5. 5. }
  6. 6. .list {
  7. 7. width: 24%; height: 100px;
  8. 8. background-color: skyblue;
  9. 9. margin-top: 15px;
  10. 10. }

然后列表的个数不多不少正好7个：

  1. 1. <div class="container">
  2. 2. <div class="list"></div>
  3. 3. <div class="list"></div>
  4. 4. <div class="list"></div>
  5. 5. <div class="list"></div>
  6. 6. <div class="list"></div>
  7. 7. <div class="list"></div>
  8. 8. <div class="list"></div>
  9. 9. </div>

此时最后一行的小方块的排列就显得很尴尬了：
image.png

二、解决方法

根据个数最后一个元素动态margin
由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。
例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。
例如：

  • .list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
  • .list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……

在本例中，一行就4个元素，因此，我们可以有如下CSS设置：

  1. 1. .container {
  2. 2. display: flex;
  3. 3. /* 两端对齐 */
  4. 4. justify-content: space-between;
  5. 5. flex-wrap: wrap;
  6. 6. }
  7. 7. .list {
  8. 8. width: 24%; height: 100px;
  9. 9. background-color: skyblue;
  10. 10. margin-top: 15px;
  11. 11. }
  12. 12. /* 如果最后一行是3个元素 */
  13. 13. .list:last-child:nth-child(4n - 1) {
  14. 14. margin-right: calc(24% + 4% / 3);
  15. 15. }
  16. 16. /* 如果最后一行是2个元素 */
  17. 17. .list:last-child:nth-child(4n - 2) {
  18. 18. margin-right: calc(48% + 8% / 3);
  19. 19. }

效果如下：
image.png
详细见：让CSS flex布局最后一行列表左对齐的N种方法