如何将最后两个Flex子项对齐到下一行的右下位置？

核心思路 #

• 将外层容器设为可换行的Flex布局，并设置垂直对齐方式为底部，确保最后一行元素贴靠容器底部
• 给最后一组子项容器添加margin-left: auto，使其自动推到容器右侧
• 每组子项容器同样使用Flex布局，让内部子元素横向排列

完整代码实现 #

HTML结构

<div class="container">
  <div class="list-items">
    <div class="item">Item One</div>
    <div class="item">Item Two</div>
    <div class="item">Item three</div>
  </div>
  <div class="list-items">
    <div class="item">Item Four</div>
    <div class="item">Item Five</div>
    <div class="item">Item Six</div>
  </div>
  <div class="list-items">
    <div class="item">Item seven</div>
    <div class="item">Item Eight</div>
  </div>
</div>

CSS样式

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  min-height: 200px; /* 根据实际需求调整高度 */
  gap: 1.5rem;
  border: 1px solid #ccc; /* 可选：用于可视化容器范围 */
  padding: 1rem;
}

.list-items {
  display: flex;
  gap: 1rem;
}

.item {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border-radius: 4px;
}

/* 将最后一组子项推至右侧 */
.list-items:last-child {
  margin-left: auto;
}

效果说明 #

• 前两组子项会排列在容器的第一行，占据左侧空间
• 最后一组的两个子项会自动换行到第二行，并对齐到容器的右下侧
• 容器的min-height可以根据实际内容高度调整，确保底部有足够空间展示最后一行元素

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