Flexbox-证明特定元素 [英] Flexbox - justify specific element

问题描述

我正在使用Flexbox，我想创建一个在一行中包含两个div的容器.其中之一应水平居中(相对于容器)，而第二个应位于左侧(就像没有道理一样).有没有不需要第三个隐藏div的解决方案?

I’m using Flexbox, I want to create container that contains two divs in one row. One of them should be horizontally centered(relatively to container) and second one should be on the left(like it wouldn't be justified). Is there any solution that doesn’t require a third, hidden div?

很遗憾，两个div都没有指定宽度.

Unfortunately both of divs don’t have specified width.

这是html的结构:

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

推荐答案

这并不完美，但是您可以做到这一点.

this is not perfect, but you can do this.

.container {
  display: flex;
}

.container > div{
   margin-right: auto;
}

.container > div:first-child {
  min-width:0;
  width:0;
  white-space:nowrap;
}

<div class="container">
  <div>Div on the left</div>
  <div>Horizontally centered div</div>
</div>

这篇关于Flexbox-证明特定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！