如何使用flexbox将两个div放在一起并保持第二个div居中？

Question

我有两个div：

<div class='container'>
  <div class='left'></div>
  <div class='centered'></div>
</div>

我想将第二个内部div居中，然后将第一个内部div放在居中的左边。我不想让左div粘在屏幕的左侧（就像float:left那样），但相反：左div应该“粘”在居中的div的左侧。

我希望使用flex进行布局，但是我愿意接受其他解决方案（不使用JavaScript，仅适用于CSS）。

Answer 1

flex容器的子代将遵循其父代对齐规则。如您所说，您需要将左侧元素粘贴在居中元素的左侧。因此，左元素不应与容器相关，而应与居中元素相关。

.Container {
  display: flex;
  justify-content: center;
}

.Left {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.Centered {
  background-color: cyan;
  position: relative;
}













/* Demo only */

.Centered, .Left {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="Container"> 
  <div class="Centered">
    <div class="Left">Left</div>
    Centered
  </div>
</div>