Question

我正在使用Flexbox，我想创建一行包含两个div的容器。其中一个应该水平居中（相对于容器），第二个应该在左边（就像它不合理）。有没有任何解决方案不需要第三个隐藏的div？

不幸的是，两个div都没有指定的宽度。

这是html的结构：

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

Answer 1

您可以使用定位：

进行此操作

＆＃13;

.container {
  display: flex;
  justify-content: center;
  position: relative;
}

.container > div:first-child {
  position: absolute;
  left: 0;
}

＆＃13;

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

＆＃13;

Answer 2

这不完美，但你可以这样做。

.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 - 证明特定元素

2 个答案: