Hier ist die Herausforderung: Wenn Sie ein Flexbox-Layout mit mehreren Zeilen von Elementen
erstellen möchten, wie steuern Sie, welches Element in welche Zeile gelangt? Angenommen,
Sie möchten ein Layout erstellen, das in etwa so aussieht, mit drei gestapelten Elementen und alternierenden Elementen in voller Breite:
Eine übliche Methode zur Steuerung der Positionierung und
Größe von flexiblen Elementen ist die Verwendung von width
oder
flex-basis
; Wenn wir für das vierte Element eine Breite von
100% festlegen, wird es in einer eigenen Zeile positioniert. Aber was ist, wenn wir die
Breite einzelner Elemente nicht festlegen möchten oder können? Müssen wir das wirklich tun?
Oder gibt es eine Möglichkeit, Flexbox nur anzuweisen, an bestimmten Punkten einen Zeilenumbruch
vorzunehmen?
Es gibt keine Eigenschaft, die wir für ein flexibles Element festlegen können, um es in eine neue Zeile aufzubrechen,
aber wir können eine reduzierte Zeile (Sie können sich das als eine <br>vorstellen)
zwischen zwei flexiblen Elementen einfügen, um etwas Ähnliches zu erreichen. Im Kern:
/* Inserting this collapsed row between two flex items will make
* the flex item that comes after it break to a new row */
.break {
flex-basis: 100%;
height: 0;
}
Lassen Sie uns einige Szenarien durchgehen, in denen Sie dies verwenden möchten, und einige interessante Layouttechniken betrachten,
die wir verwenden können.
Beachten Sie, dass in allen folgenden Codebeispielen vorausgesetzt wird, dass Sie einen flexiblen Container mit
display: flexund haben
flex-wrap: wrapund die flexiblen Elemente diesem Container hinzugefügt werden:
.container {
display: flex;
flex-wrap: wrap;
}
...
Einfügen eines Flex-Elements mit Zeilenumbruch
Die Verwendung eines Elements zum Aufbrechen einer neuen flexiblen Reihe hat einen interessanten Effekt: Wir können die Angabe
der Breite eines Elements in unserem flexiblen Layout überspringen und uns vollständig auf die Zeilenumbrüche verlassen, um den Fluss
unseres Rasters zu definieren.
Beginnen wir mit einem einfachen Beispiel. Angenommen, es werden zwei Elemente nebeneinander angezeigt (diese werden mitwachsen
flex-grow: 1, und sie haben kein definiertes
widthoder flex-basis):
Wir können ein Zeilenumbruchelement zwischen den Elementen einfügen, damit beide 100% des verfügbaren Platzes einnehmen:
...
...
Dies erzeugt ein Layout mit zwei vertikal gestapelten Elementen voller Breite
(ich habe dem .breakElement einen Rahmen hinzugefügt , um seine Position und sein
Verhalten zu veranschaulichen):
Wie funktioniert das? Da wir gesagt haben, dass .breakdies 100% der
Breite des Containers einnehmen soll (weil wir gesetzt haben flex-basis: 100%),
muss das brechende flexible Element in einer eigenen Reihe sitzen, um dies zu erreichen. Es kann keine Zeile mit dem ersten Element gemeinsam nutzen,
sodass eine neue Zeile erstellt wird, bei der das erste Element in einer Zeile in Ruhe gelassen wird. Das erste Element wird dann vergrößert,
um den verbleibenden Platz zu füllen (seit wir festgelegt haben flex-grow: 1).
Die gleiche Logik gilt für den zweiten Punkt.
Mit dieser Technik können wir das Layout am oberen Rand des Pfostens zusammenstellen, indem wir vor und nach jedem vierten Element aufteilen:
...
...
...
...
...
...
...
Dadurch wird das Layout oben im Blogeintrag erstellt. Grundsätzlich wird ein Element nicht in eine neue Zeile aufgeteilt, es sei denn,
wir fügen das Zeilenumbruch-Element ein:
Auch hier mussten wir bei keinem dieser Elemente die Breite angeben. Die gleiche Technik funktioniert für Spalten,
wenn wir einen flexiblen Container mit flex-direction: columnhaben und das
width(anstatt height)
0für unser Trennelement auf setzen:
/* Use a collapsed column to break to a new column */
.break-column {
flex-basis: 100%;
width: 0;
}
Dieser Ansatz, Zeilenumbruchelemente zum Definieren eines Layouts zu verwenden, fügt unserem HTML-Code auf jeden Fall ein wenig Aufblähen
und Rauschen hinzu, kann jedoch bei richtiger Verwendung ein leistungsstarkes Werkzeug sein.
Wir können es beispielsweise verwenden, um ein Mauerwerkslayout nur mit CSS zu erstellen und die Umbrüche dynamisch mit der
orderEigenschaft zu positionieren . Wir können auch in eine neue Zeile springen,
ohne die Breite eines Inhaltselements ändern zu müssen, und wir können uns ausschließlich darauf verlassen
flex-grow, dass der Platz in einem Rasterlayout verteilt wird.
Angenommen, wir möchten dieses Layout erstellen:
Angenommen, wir möchten dies tun, indem wir unterschiedliche Werte für flex-grow
die Verteilung des Speicherplatzes festlegen (anstatt flex-basisoder zu verwenden
width, die Sie neu berechnen müssten, sobald Sie Elemente hinzugefügt oder entfernt
haben):
Wenn wir dann eine weitere Zeile mit Elementen unterhalb dieser Zeile hinzufügen möchten:
Wir wären nicht in der Lage, dies zu tun, ohne auf das Einstellen flex-basisoder
widthzumindest auf einige der Elemente zurückzugreifen (oder ein
verschachteltes Flexbox-Layout mit einem Flex-Element für jede Zeile zu erstellen). Wenn alle Elemente nur unterschiedliche Werte für "
flex-grownichts" haben, werden sie in eine neue Zeile aufgeteilt, und alle Elemente
werden nur in einer Zeile zusammengepresst:
Gemütlich, aber nicht das, wonach wir suchen. Wenn wir jedoch ein Unterbrechungselement einfügen, können wir dieses Layout erstellen,
indem wir den gesamten Speicherplatz folgendermaßen verteilen flex-grow:
Das gewünschte Layout erzielen, wobei alle Größen proportional definiert werden durch
flex-grow:
Und wenn es ein Szenario gibt, in dem wir fünf Elemente in der ersten Zeile benötigen, müssen wir kein CSS ändern, damit dies funktioniert.
Wir können diese Elemente einfach vor dem Zeilenumbruch hinzufügen:
Alles, was Sie zu Ihrem CSS hinzufügen müssen, um Zeilenumbruchelemente zu verwenden, sind diese beiden Klassen (der einzige Unterschied
zwischen den beiden Klassen besteht darin, dass width(und nicht
height) festgelegt werden muss, damit
0das Element bei Verwendung in einem Spaltenlayout minimiert wird). :
/* Inserting a collapsed row between two flex items will make
* the flex item that comes after it break to a new row */
.break {
flex-basis: 100%;
height: 0;
}
/* Use a collapsed column to break to a new column */
.break-column {
flex-basis: 100%;
width: 0;
}
Sie könnten sicherlich die gleiche Wirkung oder ähnliche Effekte erzielen , indem flexboxes und mit einem flexiblen Element für jede Zeile,
und in vielen Fällen nur unter Verwendung nisten flex-basis,
widthoder der Inhalt innerhalb der flexiblen Elemente ist wahrscheinlich die
bevorzugte Art und Weise der Steuerung des Flusses von Gegenständen in einem Flexbox-Layout. Das Einfügen von flexiblen Gegenständen
mit Zeilenumbruch ist jedoch leicht möglich und funktioniert, und die Technik weist einige einzigartige Merkmale auf, die sich als
nützlich erweisen können.