如何动态调整Flexbox元素位置？将指定元素移至容器右侧

核心思路是利用Flexbox的**自动外边距（auto margin）**特性，它能自动填充元素一侧的剩余空间，无需提前知晓左右元素数量，就能轻松实现需求。

代码实现 #

CSS修改

给需要靠右的.right类添加自动左外边距：

.grid {
  display: flex;
  /* 默认justify-content就是flex-start，可省略 */
}

.item.right {
  margin-left: auto;
}

HTML示例

给目标元素添加.right类即可，无需调整DOM结构：

<div class="grid">
  <div class="item">1</div>
  <div class="item right">2</div>
  <div class="item">3</div>
  <div class="item right">4</div>
</div>

原理说明 #

当第一个带有.right类的元素设置margin-left: auto时，Flexbox会自动计算并填充该元素左侧的所有剩余空间，将它以及后续所有元素一同推到容器的最右侧。不管有多少个.right元素，这个逻辑都能生效，完全适配未知数量的左右元素场景。

如果需要调整元素间的间距，直接给.item添加margin属性即可，不会影响整体布局逻辑。

内容的提问来源于stack exchange，提问作者Laczkó Örs