【踩坑】CSS使用Flex布局时遇到的对齐问题

发表于 更新于 阅读次数：

前言

CSS使用Flex布局时，如果容器使用了两端对齐，最后一行的元素个数在不能塞满一整行时，会出现优先进行两边对齐的问题，而实际希望按照从左到右的顺序摆放

期望的结果
x x x
x x

实际的结果
x x x
x x

解决问题

  • 塞入一整行元素个数 - 2个没有高度的元素来做占位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
  .flex-container {
    width: 500px;
    height: 300px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .flex-container > span {
    width: 150px;
    height: 150px;
  }
  
  .flex-item {
    width: 150px;
  }
</style>

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
  <div class="flex-item">5</div>
  <span></span>
  <span></span>
  <span></span>
</div>

完成