flex布局最后一行左对齐

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

flex布局最后一行左对齐的几种方法。

列数不固定

添加空白标签占位

添加足够的空白标签填充占位，具体数量由最大列数决定。例如这个布局最多10列，就需要使用10个空白标签占位。占位标签的width和margin应与item相同。

缺点：污染html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex">
  <div class="item"></div>
 <!--  使用足够多的标签占位  -->
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
  <i aria-hidden="true"></i>
</div>
1
2
3
4
5
6
7
8
9
10
11
.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  // 设置和item相同的width和margin
  > i {
    width: 120px;
    margin-right: 8px;
  }
}

See the Pen flex-align last row to the left by ly023 (@ly023) on CodePen.

改成Grid布局

兼容性

不考虑兼容性问题，首选Grid布局。

1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 120px);
  justify-content: space-between;
  grid-gap: 8px;
}

See the Pen flex布局最后一行左对齐-使用grid布局 by ly023 (@ly023) on CodePen.