收缩容器以适应包裹的子元素

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

问题是，当有足够的空间来容纳元素时，我会得到一个漂亮的紧身孩子，并且孩子之间的间距均匀。 （第一，顶部 div 块）

然而，当子项中没有足够的空间并且文本开始换行时，这一切都会朝着一个奇怪的方向发展 - 子项不再紧密贴合，即使换行后，弹性子项周围也有足够的空间，因为没有不再合适了，周围的空间实际上没有机会发挥作用（第二个 div 块）

但是，如果我在自动换行符发生的地方添加手动换行符，所有内容都会按“应该”的方式布局......（底部，第三块）

我想要的是始终让孩子们紧紧地固定在他们的盒子（黑色边框）内，无论剩下的空间，都会在他们之间均匀分布，而无需我添加手动换行符（这不是一个选项）就我而言）

这可能吗？...

Answer 1

仔细看看我更改的 Fiddle：

• .holder width 到 max-width （在 .v 类中）
• 修改了 .holder 以 wrap 和 space-around 其子项
• 为了清晰起见，添加了另外 2 个 .v 类
• 删除了
的
• 并且，最重要的是，将 flex: 0 0 添加到 .child

Flexbox几乎总是需要设置max-width，这比width更灵活。 根据您需要 .children 的行为方式，修改 flex: 0 0 中的 flex-grow 和 flex-shrink 来满足您的需求。 （flex: 1 0 的结果看起来也不错）

...不需要 JavaScript...

Codrops Flexbox 参考对于理解灵活框布局非常有用。

Answer 2

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

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

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

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

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

您需要一个 JavaScript 解决方案（请参阅此处和此处）...或 CSS 媒体查询（请参阅此处）。

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