如何在Flexbox中右移中间div且保持space-around布局

在设置了justify-content: space-around的Flexbox容器中，想把中间的div向右移动，但不想修改justify-content属性。用普通margin调整会影响父容器整体间距，目前用margin-left:100px; margin-right:-100px的方法虽然有效，但小屏幕会重叠，不响应式，也不够优雅。想问仅靠Flexbox能不能实现这个需求？

现有代码示例 #

CSS代码 #

.main {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.item1 {
   border: 1px solid red;
}

.item2 {
   margin-left: 100px;
   margin-right: -100px;
   border: 1px solid red;
}

HTML代码 #

<div class="main">
 <div class="item1">
  Item 1
 </div>
  <div class="item2">
  Item 2
 </div>
  <div class="item1">
  Item 3
 </div>
</div>

优雅解决方案（仅用Flexbox特性） #

方法1：使用transform: translateX() #

这是最简洁的方案，不会影响Flex容器的布局流，也不会破坏响应式。直接给中间元素添加横向平移：

.item2 {
   transform: translateX(100px); /* 向右移动100px，可根据需求调整数值 */
   border: 1px solid red;
}

原理：transform属于视觉层面的位移，不会改变元素在文档流中的占位，所以不会影响其他元素的间距和容器布局，小屏幕下也不会出现重叠问题。

方法2：利用Flex的margin-left: auto配合伪元素 #

如果需要更贴合Flex布局逻辑的方式，可以给容器添加伪元素，通过自动margin来调整中间元素的位置：

.main::before {
   content: '';
   margin-left: auto;
}
.item2 {
   margin-left: 100px; /* 控制向右移动的距离 */
   border: 1px solid red;
}

原理：Flex容器中，margin-left: auto会让伪元素占据左侧剩余空间，再给中间元素设置margin-left，就能在不破坏space-around原有布局的前提下，精准向右移动中间元素，同时保持响应式。

方法3：嵌套Flex容器 #

把中间元素放在一个新的Flex容器里，通过子容器的对齐方式来调整位置：

.item2-wrapper {
   display: flex;
   justify-content: flex-end; /* 让内部元素靠右 */
   width: 100%; /* 保持原有占位宽度 */
}
.item2 {
   border: 1px solid red;
   margin-left: 100px; /* 可选：进一步调整偏移 */
}

对应HTML调整：

<div class="main">
 <div class="item1">Item 1</div>
 <div class="item2-wrapper">
  <div class="item2">Item 2</div>
 </div>
 <div class="item1">Item 3</div>
</div>

原理：通过嵌套Flex容器，在不改变父容器space-around的情况下，独立控制中间元素的对齐位置，适合需要更复杂布局调整的场景。

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