将 div 在 flexbox 内向右移动，同时保持空间宽度答案

【问题标题】：Moving div to the right inside flexbox while keeping space-around width将 div 在 flexbox 内向右移动，同时保持空间宽度
【发布时间】：2022-11-02 15:04:41
【问题描述】：

所以我试图将 div 移到 flexbox 内的右侧。

我不想将 justify-content 更改为其他任何内容，但我正在尝试将中间 div 向右移动。但是，如果我使用边距并移动它，那么整个父 div 周围的空间也会受到影响。是否可以将中间div向右移动而不影响整个div的空间？

到目前为止，这种解决方案是可行的——但是这些项目会在较小的屏幕上相互叠加，所以这根本没有响应：

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

但它似乎不是很优雅。有没有办法只用 flexbox 做到这一点？

.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;
}

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

【问题讨论】：

标签： html css flexbox

【解决方案1】：

CSS 变换可以改变元素的位置，但不会影响周围的元素。

这个 sn-p 删除边距设置，而是使用transform: translateX(100px)。

.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;
   */
  transform: translateX(100px);
  border: 1px solid red;
}

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

【讨论】：

【解决方案2】：

我想你可以在这里使用order 属性

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

.item1 {
   border: 1px solid red;
}

.item2 {
   order: 3;
   border: 1px solid red;
}

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

【讨论】：