如何使用flexbox将两个div放在一起并保持第二个div居中? [重复]

最后发布: 2018-09-06 11:21:16


问题

这个问题已经在这里有了答案:

我有两个股利:

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

我想将第二个内部div居中,然后将第一个内部div放在居中的左边。 我不希望左div粘在屏幕的左侧(就像float:left那样),但相反:左div应该“粘”在居中的div的左侧。

我更愿意使用flex进行布局,但是我愿意接受其他解决方案(没有JavaScript,仅css)。

html css css3 flexbox
回答

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>