製作容器收縮到合適的子元素，因爲它們包裹

我試圖找出如何實現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塊）

但是，當兒童內部沒有足夠的空間和文本開始包裝時，它們都會沿着一個奇怪的方向發展 - 兒童不再適合了，即使包裝後，也有足夠的空間圍繞靈活兒童，因爲沒有適當的適合了，空間周圍並沒有真正有效的機會（第二個div區塊）

但是，如果我添加手動換行符在自動行（底部，第三塊）

我想要的是總是有孩子緊緊地裝在他們的盒子裏（黑色邊框），並且wh atever剩餘空間，將他們之間均勻分佈，沒有我不得不添加手動換行符（這是不是在我的情況選擇）

在所有這可能嗎？...

來源

2016-05-24 Mikhail Kornienko

在CSS中，父容器並不知道子包裝什麼時候包裝。因此，它會繼續擴大其規模而忽視內部發生的事情。

換言之，瀏覽器在最初的級聯上呈現容器。當孩子包裝時，它不會迴流文件。

這就是爲什麼容器不收縮縮小布局的原因。它只是繼續下去，就好像沒有任何包裹一樣，正如右側的預留空間所證明的那樣。

水平空白的最大長度是容器預期在那裏的元素的長度。

在下面的演示中，空格可以看到來來往往的窗口的尺寸重新調整水平：DEMO

你需要一個JavaScript解決方案（見here和here）...或CSS媒體查詢（見here）。

在處理包裝文本時，容器上的text-align: right在某些情況下可能會有幫助。

來源

2016-05-24 12:27:43

之所以你的塊像這樣的行爲是因爲CSS渲染。

在你的第一個案例中，瀏覽器並不知道塊的內容何時變得太小。所以它不斷伸展，直到達到最大值，然後渲染文本。

在最後一種情況下，您告訴瀏覽器在哪裏破壞，以便知道元素不應變寬。

您可以輕鬆解決這個問題的唯一方法就是自己設置折點。

來源

2016-05-24 07:00:55

謝謝！我擔心這樣的事情可能會發生...仍然希望存在一些聰明的黑客，因爲它看起來像一個相當普遍的情況... –

我們在我們的工作中有一個類似的問題，我們希望圖標漂浮在文本旁邊：http： //codepen.io/WartClaes/pen/grVQrz?editors=1100。只有我們也碰到這個問題，即該塊總是呈現整個寬度，但是存在很多空白。 –

好好看看我的Fiddle中，我改變了：

.holderwidth到max-width（在.v類）
修改.holder到wrap和space-around其子女加
2更多.v類清晰度
刪除<br>'s
和，最重要的，加入flex: 0 0到.child

Flexbox的幾乎總是需要max-width進行設置，這比width更加靈活。根據您需要.child ren的行爲，修改flex-grow和flex-shrink的flex: 0 0以滿足您的需求。（中結果看起來不錯，太）

...沒有所需的JavaScript ...

UPDATE的Codrops Flexbox Reference真的幫了我很多理解FBL ...

來源

2016-11-16 16:27:48

製作容器收縮到合適的子元素，因爲它們包裹

回答

相關問題