CSS Flex布局最后一行左对齐问题解决方案咨询

你的问题核心是Flexbox中justify-content: space-between会让最后一行元素强制两端对齐，要实现上方行两端对齐、最后一行左对齐且间距一致，同时容器保持视口80%宽度，有两种简单可行的Flex方案：

方案一：伪元素占位法（推荐） #

通过给父容器添加伪元素，模拟最后一行缺失的元素占位，让space-between的对齐逻辑保持，同时最后一行元素自然左对齐。

修改后的完整代码：

<div class="container">
<ul class="skills_list">
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
  <li class="skills_icon">Java</li>
</ul>
</div>

.container {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* 确保容器在视口内居中 */
}

.skills_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%; /* 占满容器的80%宽度 */
  gap: 5px; /* 用gap统一控制元素横向间距，替代margin-left */
}

.skills_list li {
  list-style: none;
  background-color: yellow;
  width: 15%;
  padding: 10px;
  margin-top: 10px;
}

/* 添加伪元素占位，匹配列表项宽度 */
.skills_list::after {
  content: "";
  flex: 0 0 15%;
}

原理说明 #

• 用gap替代margin-left，统一控制元素间的横向间距，避免手动计算误差
• 伪元素设置和列表项相同的宽度，当最后一行元素数量不足时，伪元素会占据最后一个“空位”，让前面的元素保持和上方行一致的间距，同时自然左对齐
• skills_list设置width: 100%，确保占满容器的80%宽度，实现两端填满的效果

方案二：调整justify-content + 负margin #

如果不想用伪元素，可以通过justify-content: flex-start配合父容器的负margin来实现两端对齐：

.container {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.skills_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 -5px; /* 负margin抵消子元素的左右margin */
}

.skills_list li {
  list-style: none;
  background-color: yellow;
  width: calc(15% - 10px); /* 计算宽度，减去左右margin总和 */
  padding: 10px;
  margin: 10px 5px 0; /* 统一设置上下左右margin */
}

原理说明 #

• 父容器设置负margin，抵消子元素的左右margin，让最外层元素刚好贴合容器边缘，实现两端填满
• 子元素用calc计算宽度，减去左右margin的总和，确保每行能放下整数个元素
• justify-content: flex-start让所有行（包括最后一行）左对齐，通过margin控制元素间距，保持和上方行一致的效果

两种方案都能满足需求，方案一无需计算宽度，更简洁易维护。

内容的提问来源于stack exchange，提问作者Jessica