Schrumpfen Sie den Container so, dass er in umhüllte untergeordnete Elemente passt

Question

Ich versuche herauszufinden, wie Flexbox in einer Situation wie dieser funktioniert (funktionieren sollte?...):

.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>

Hier ist JSFiddle

Das Problem ist, dass ich, wenn genügend Platz zum Halten der Elemente vorhanden ist, ein schönes, enges Kind mit gleichmäßigem Abstand zwischen den Kindern bekomme. (erster, oberer Div-Block)

Wenn jedoch nicht genügend Platz im untergeordneten Element vorhanden ist und der Text mit dem Umbruch beginnt, geht alles in eine merkwürdige Richtung – die untergeordneten Elemente passen nicht mehr richtig und selbst nach dem Umwickeln ist noch genügend Platz um das flexible untergeordnete Element herum, da dies nicht der Fall ist. Es passt nicht mehr und der umgebende Raum hat nicht wirklich eine Chance zu funktionieren (der zweite Div-Block)

Wenn ich jedoch manuelle Zeilenumbrüche an der Stelle hinzufüge, an der die automatischen Zeilenumbrüche erfolgen, wird alles so angeordnet, wie es „sollte“ ... (unten, dritter Block)

Was ich möchte, ist, dass die Kinder immer fest in ihrer Box bleiben (schwarzer Rand) und der verbleibende Platz gleichmäßig zwischen ihnen verteilt wird, ohne dass ich manuelle Zeilenumbrüche einfüge (das ist für mich keine Option)

Ist das möglich? ...

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 在某些情况下可能会有所帮助。