html - 使容器在包裹时收缩以适合子元素

Question

我正在尝试弄清楚 flexbox 是如何工作的(应该工作？…)对于如下情况:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

JSFiddle here

问题是，当有足够的空间来容纳元素时，我会得到一个漂亮的紧身子元素，它们之间的间距均匀。 (首先，顶部 div block )

然而，当没有足够的空间并且 children 中的文本开始换行时，这一切都朝着一个奇怪的方向发展 - children 不再紧密贴合，即使在换行之后，flex children 周围有足够的空间，因为没有不再适合，space-around 真的没有机会工作了(第二个 div block )

但是，如果我在自动换行符出现的地方添加手动换行符，一切都会按照“应该”的方式布置......(底部，第三 block )

我想要的是总是让 children 紧紧地放在他们的盒子里(黑色边框)，无论剩下什么空间，都会在他们之间平均分配，而我不必添加手动换行符(这不是一个选项在我的例子中)

这有可能吗？...

Answer 1

在 CSS 中，父容器不知道它的子容器何时换行。因此，它会继续扩大其规模，而不会理会内部发生的事情。

换句话说，浏览器在初始级联上渲染容器。当 child 换行时，它不会重排文档。

这就是容器不收缩较窄布局的原因。正如右侧的保留空间所证明的那样，它就好像没有任何包裹一样继续前进。

水平空白的最大长度是容器期望的元素的长度。

在下面的演示中，随着窗口水平调整大小，可以看到空格来来去去:DEMO

您需要一个 JavaScript 解决方案(参见 here 和 here)...或 CSS 媒体查询(参见 here)。

在处理环绕文本时，容器上的 text-align: right 在某些情况下可能会有所帮助。