如何在CSS flexbox布局中将最后两项及以上的项右对齐

这个需求可以实现，最简洁兼容的方案是将所有需要右对齐的子项包裹在一个独立的flex子容器中，给这个容器设置margin-left: auto即可。

实现代码 #

CSS 部分

.flexcontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1em;
  row-gap: 1em;
  padding: 10px;
  margin-bottom: 20px;
  font-family: sans-serif;
  font-size: 14px;
}
.flexcontainer .item {
  border: 1px solid blue;
  border-radius: 4px;
  padding: 0.5em 1em;
  width: 80px;
  text-align: center;
}
/* 新增右对齐组样式 */
.right-group {
  gap: inherit;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
}

HTML 部分

<div class="flexcontainer" style="border: 1px solid red;">
  <div class="item">item 1 - left</div>
  <div class="item">item 2 - left</div>
  <div class="item">item 3 - left</div>
  <!-- 所有需要右对齐的项放入该组 -->
  <div class="right-group">
    <div class="item">item 4 - right</div>
    <div class="item">item 5 - right</div>
  </div>
</div>

方案优势 #

• 右对齐项作为整体始终靠容器右侧排列，不会出现多余间隔
• 右对齐组内支持任意换行，换行后整个组依然保持靠右，间距和全局统一
• 支持任意数量的右对齐项，子项宽度不需要统一

如果不想新增额外DOM节点，也可以使用CSS Grid布局实现：给容器设置display: grid、grid-auto-flow: row dense、justify-items: start，给所有需要右对齐的元素设置justify-self: end即可，行为和flex方案基本一致。

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