收縮容器以適應包裹的子元素

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 在某些情況下可能會有所幫助。