Flexbox如何将单个div右移且不影响其余居中div的布局

你遇到的问题是margin-left: auto会抢占flex容器的剩余空间，导致原本居中的元素被挤压偏移，可以用以下几种方法实现目标布局：

方案1：占位平衡法（兼容性最优，纯Flex实现） #

通过在容器首尾添加宽度相同的占位元素，平衡左右两侧的剩余空间，让中间两个元素自然居中：

• 给flex容器设置display: flex、justify-content: space-between、align-items: center
• 容器头部添加空占位元素，尾部的操作元素宽度和头部占位元素宽度设置为相同值
• 如果不想新增DOM节点，可以用::before和::after伪元素替代占位节点

示例代码：

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 头部占位伪元素，宽度和右侧元素一致即可 */
.flex-container::before {
  content: "";
  width: 80px;
}
.right-item {
  width: 80px;
}

方案2：Grid布局实现（代码更简洁） #

如果不需要兼容极低版本浏览器，Grid布局更适配这个场景，直接定义三列网格即可：

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.center-group {
  /* 中间两个元素放在这个容器内自动居中 */
  grid-column: 2 / 3;
  display: flex;
  gap: 16px;
}
.right-item {
  grid-column: 3 / 4;
  justify-self: end;
}

方案3：绝对定位法（适合右侧元素宽度固定的场景） #

直接将右侧元素脱离文档流固定在容器右侧，不会影响中间元素的居中位置：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.right-item {
  position: absolute;
  right: 0;
}

注意：如果右侧元素宽度不固定、可能超出容器的场景，优先选方案1或方案2，避免出现内容重叠问题。

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