Question

参考CSS side by side div's auto equal widths，我正在寻求解决同样的问题，只是我使用的是flexbox，并且不希望对我正在显示的内容使用表格样式。

#outer {
  width: 1024px;
  height: 768px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="outer">
  <div class="inner">Inner HTML content has larger natural width</div>
  
  <div class="inner">Inner HTML content has smaller natural width</div>
</div>

因此，两列的宽度将以其内容拉伸，但左列的宽度将因此而变大。为了保持两列关于中心对称，我需要右列，其当前宽度比左列短，增加到等于左边。我如何在flexbox布局中执行此操作？

编辑：我看到许多答案基本上为两个容器（~50％）分配固定宽度。那不是我想要的。左侧容器可以自由伸展到内容需要的任何宽度，受到最大限制，并且不应该被触摸。正确的容器需要扩展其宽度以匹配左侧。

这可以在不诉诸JavaScript的情况下完成吗？

Answer 1

要解决这个问题，需要将正确定位为绝对值，并使outer显示为内联。

如果内联，outer将根据其内容进行调整，即左，作为弹性项目，其大小也按其内容调整，右侧不会影响它，因为它被定位为绝对值并从正常流量中取出。

然后，只需将右按到 left 的末尾，它就会完全呈现您想要的效果。

Fiddle demo

Stack snippet

＆＃13;

#outer {
  position: relative;  
  height: 300px;
  
  display: inline-flex;
  justify-content: center;
  align-items: center;  
}
.inner {
  border: 1px solid red;
}
.inner:nth-child(2) {
  position: absolute;
  left: 100%;
  width: 100%;
}

/* this is for styling purpose only, and produce a blue border */
#outer::after {
  content: '';
  position: absolute;  
  left: 0; top: 0;
  height: 100%;
  width: 200%;
  border: 1px solid blue;
}

＆＃13;

<div id="outer">
  <div class="inner">
   Inner HTML content has larger natural width than the other
 </div>
  
  <div class="inner">
   This has a smaller natural width
  </div>
</div>

＆＃13;

如果你另外打算在视口中间总是有2列的中心，你可以这样做（如果这是你想要的，请告诉我，我将解释它的作用）

Fiddle demo 2

Answer 2

将 flex 设置应用于.inner元素：

.inner {
    flex: 1 1 auto;
}

这是flex-grow，flex-shrink和flex-basis设置的简写版本。

这将确保#outer元素的剩余空间平均分配给所有子元素，无论它们有多少。

有关完整细分，请参阅以下文章。

CSS Tricks - A Complete Guide to Flexbox

Answer 3

虽然您可以使用：

.inner {
  flex: 1 0 50%;
  border: 1px solid red;
}

最简单的解决方案是：

.inner {
  width: 50%;
  }

这使内部<div>的宽度为#outer div的50％。 50 + 50是100％。

Answer 4

我建议不要在这种情况下使用flex，但要使内部DIV内联块width: 50%。注意：在这种情况下，重要的是HTML代码中的DIV之间没有换行符 - 请参阅下面的示例。

＆＃13;

#outer {
  width: 1024px;
  height: 768px;
}

.inner {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  border: 1px solid #eee;
}

＆＃13;

<div id="outer">
  <div class="inner">Inner HTML content has larger natural width</div><div 
  class="inner">Inner HTML content has smaller natural width</div>
</div>

＆＃13;

如何在flexbox中并排设置两个div的相等宽度？

4 个答案: