Make Behälter schrumpfen zu montierende Kind-Elemente, wie sie wickeln

Question

Ich versuche Flexbox Werke um herauszufinden, wie (angeblich arbeiten ...?) Für Fälle wie unten:

.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

Das Problem ist, dass, wenn es genügend Platz gibt, um Elemente zu passen, ich eine schöne eng anliegende Kinder, mit gleichmäßigem Abstand zwischen bekommen. (erstens, oberer div. Block)

Wenn jedoch nicht genug Platz und Text im Inneren von Kindern vorhanden ist, beginnt alles in eine seltsame Richtung zu gehen - Kinder sind nicht mehr festsitzend und auch nach dem Einwickeln ist genug Platz um flex kinder, weil es nicht mehr richtig passen, hat raum-um nicht wirklich eine chance zu arbeiten (zweiter div block)

Aber immer noch, wenn ich manuelle Zeilenumbrüche an Orten, wo die automatische Linie es kommt zu Unterbrechungen, alles wird so ausgelegt, wie es "sollte" ... (unten, dritter Block)

Was ich möchte, ist immer Kinder eng anliegend in ihren Boxen (schwarze Ränder) und wh atever Raum gelassen wird, würde gleichmäßig zwischen ihnen verteilt werden, ohne dass ich manuellen Zeilenumbrüche hinzufügen zu müssen (was in meinem Fall keine Option ist)

Ist es überhaupt möglich? ...

Answer 1

In CSS weiß der übergeordnete Container nicht, wenn seine untergeordneten Elemente umbrochen werden. Daher skaliert es seine Größe weiter, ohne zu wissen, was im Inneren vor sich geht.

Anders ausgedrückt rendert der Browser den Container auf der ersten Kaskade. Das Dokument wird nicht umgeblättert, wenn ein Kind umgebrochen wird.

Deshalb schrumpft der Container das schmalere Layout nicht. Es geht einfach so weiter, als wäre nichts eingepackt, wie der reservierte Platz auf der rechten Seite zeigt.

Die maximale Länge des horizontalen Leerraums ist die Länge der Elemente, die der Container erwartet hat.

In der folgenden Demo können Leerzeichen zu sehen kommen und wie das Fenster gehen wird die Größe neu horizontal: DEMO

Sie erhalten eine JavaScript-Lösung benötigen ... oder CSS-Medienanfragen (here und here sehen) (siehe here).

Wenn Sie mit dem Umbrechen von Text arbeiten, kann in einigen Fällen text-align: right auf dem Container hilfreich sein.

Answer 2

Der Grund, warum Ihre Blöcke benehmen sich wie dies ist wegen CSS-Rendering.

Im ersten Fall in der Geige weiß der Browser nicht, wenn der Block zu klein für seinen Inhalt wird. So dehnt es sich weiter aus, bis es das Maximum erreicht und rendert dann den Text.

In Ihrem letzten Fall sagen Sie dem Browser, wo zu brechen ist, also weiß es, dass das Element nicht breiter werden sollte.

Die einzige Lösung, die Sie leicht lösen können, besteht darin, die Pausen selbst zu setzen.

Answer 3

Haben Sie einen guten Blick auf meine Fiddle, in dem ich geändert:

• .holderwidth zu max-width (in .v Klassen)
• .holder-wrap und space-around seine Kinder
• geändert hinzugefügt 2 mehr .v Klassen für Klarheit
• entfernt, um die <br>'s
• und, was am wichtigsten ist , hinzugefügt flex: 0 0 zu .child

Flexbox fast braucht immer max-width eingestellt werden, was als width flexibler ist. Je nachdem, wie Sie das .child Verhalten benötigen, ändern Sie die flex-grow und flex-shrink in flex: 0 0, um Ihre Bedürfnisse zu erfüllen. (Das Ergebnis der schön aussieht auch)

... kein Javascript benötigt ...

UPDATE Die Codrops Flexbox Reference half mir wirklich viel Verständnis FBL ...