flex-box: schrumpfen vor wrap

Question

Ich habe ein Layout mit mehreren Spalten, von denen einige sind fixiert und andere dehnen wie nötig. Daher verwende ich flexbox. Außerdem möchte und muss ich Flex-Wrap verwenden.

Die Struktur ist wie folgt:

<div class="row" style="display: flex; flex-flow: row wrap"> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
    <div class="column stretch" style="flex: 1 1 auto"></div> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
</div> 

Bitte sehen http://jsfiddle.net/mh3rypqj/1/

Jetzt ist alles wie erwartet funktioniert, solange wir über leere Divs sprechen. Sobald ich ein p in die Dehnungssäule lege, verhält sich das Wickeln und Schrumpfen anders.

Mein erwartetes Verhalten, wenn der Platz kleiner wird: Zuerst schrumpfen, dann wrap. Schrumpfen Sie den .stretch. Sobald die minimale Breite erreicht ist, wickeln Sie die Elemente ein.

Das Verhalten, das ich bekomme, sobald ich das p in .stretch: zuerst wickeln, dann schrumpfen. Die Reihe wird zuerst eingewickelt. Das Schrumpfen tritt nur auf, nachdem alles eingepackt wurde.

Ich möchte zuerst schrumpfen, dann wickeln. Kurz gesagt, ich möchte, dass sich die zweite Reihe im JSFiddle genau wie die erste verhält. Was muss ich tun?

Answer 1

Set flex-basis gleich min-width:

.column.stretch { 
    flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */ 
    max-width: 300px; 
    min-width: 100px; 
    background: red; 
} 

edited JSfiddle example

Answer 2

Wenn Flexstrom verwendet wird, schrumpft geschieht immer nur NACH der Flex-Basis Größe erreicht ist. Wenn Sie die Flex-Basis festlegen: 100px, wie oben vorgeschlagen, bedeutet dies, dass die Zeile mit dem Umbruch beginnen soll, wenn nicht genügend Platz für alle Elemente vorhanden ist, einschließlich der 100px-Basis dieser Spalte. Sobald der Raum leer ist, werden die Gegenstände in eine neue Linie eingewickelt. Wenn der Speicherplatz wieder leer ist, wird eine neue Zeile erstellt. Dies wird fortgesetzt, bis jedes Element seine eigene Linie hat. Nur dann - wenn es immer noch nicht Platz für die Basis gibt - wird der Artikel beginnen zu schrumpfen.

Der Grund für den Unterschied zum Absatz des Inhalts liegt darin, dass Sie nicht explizit eine Flex-Basis festlegen. Wenn flex-basis auf auto eingestellt ist, wird auf die Breite des Elements zurückgegriffen. Wenn die Breite nicht festgelegt ist, fällt die Basis auf die Größe des Elements zurück, sobald der Inhalt gerendert ist, und korrigiert dann um die minimale und maximale Breite. Also 300px in diesem Fall, weil du eine maximale Breite einstellst. Beachten Sie, dass, wenn Sie die maximale Breite entfernen, dieses Element eine volle Breite von 100% erhält und sofort in seine eigene Zeile fließt. Wenn Sie dann die Größe der Seite ändern, beginnt das Element zu schrumpfen, da es bereits eine eigene Zeile hat und nicht genügend Platz für diese Anfangsgröße vorhanden ist.

Hoffe, dass hilft!