DasFlexible Box Layout-Modul (in der Regel als Flexbox bezeichnet) ist ein eindimensionales Layoutmodell zur Verteilung von Platz zwischen Elementen und umfasst zahlreiche Ausrichtungsfähigkeiten. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im weiteren Verlauf dieser Leitfäden genauer untersuchen werden.

Wenn wir Flexbox als eindimensional beschreiben, meinen wir damit, dass Flexbox das Layout jeweils in einer Dimension behandelt — entweder als Zeile oder als Spalte. Dies steht im Gegensatz zum zweidimensionalen Modell desCSS Grid Layout, das Spalten und Zeilen gemeinsam steuert.

Die beiden Achsen von Flexbox

Wenn Sie mit Flexbox arbeiten, müssen Sie in Bezug auf zwei Achsen denken — dieHauptachse und dieQuerachse. DieHauptachse wird durch dieflex-direction-Eigenschaft definiert, und dieQuerachse verläuft dazu senkrecht. Alles, was wir mit Flexbox tun, bezieht sich auf diese Achsen, daher lohnt es sich, zu verstehen, wie sie von Anfang an funktionieren.

Die Hauptachse

DieHauptachse wird durchflex-direction definiert, das vier mögliche Werte hat:

• row
• row-reverse
• column
• column-reverse

Wählen Sierow oderrow-reverse, läuft Ihre Hauptachse in derInline-Richtung entlang der Zeile.

Wählen Siecolumn odercolumn-reverse, läuft Ihre Hauptachse in derBlock-Richtung, von oben nach unten auf der Seite.

Die Querachse

DieQuerachse verläuft senkrecht zur Hauptachse. Daher, wenn Ihrflex-direction (Hauptachse) aufrow oderrow-reverse gesetzt ist, verläuft die Querachse entlang der Spalten.

Wenn Ihre Hauptachsecolumn odercolumn-reverse ist, verläuft die Querachse entlang der Zeilen.

Start- und Endlinien

Ein weiterer wichtiger Punkt ist, dass Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. Flexbox nimmt nicht einfach an, dass alle Textzeilen oben links in einem Dokument beginnen und sich zur rechten Seite hin bewegen, wobei neue Zeilen untereinander erscheinen. Stattdessen unterstützt es alle Schreibmodi wie anderelogische Eigenschaften und Werte.

Sie könnenmehr über das Verhältnis zwischen Flexbox und Schreibmodi lesen in einem späteren Artikel; die folgende Beschreibung sollte jedoch helfen, zu verstehen, warum wir nicht von links und rechts, oben und unten sprechen, wenn wir die Richtung beschreiben, in der unsere Flex-Elemente fließen.

Wenn dieflex-directionrow ist und ich auf Englisch arbeite, befindet sich der Anfangsrand der Hauptachse links, der Endrand rechts.

Wenn ich auf Arabisch arbeite, befände sich der Anfangsrand meiner Hauptachse rechts und der Endrand links.

In beiden Fällen befindet sich der Startrand der Querachse am oberen Rand des Flex-Containers und der Endrand am unteren Rand, da beide Sprachen einen horizontalen Schreibmodus haben.

Nach einiger Zeit wird es selbstverständlich, über Anfang und Ende statt über links und rechts nachzudenken, und es wird Ihnen nützlich sein, wenn Sie sich mit anderen Layout-Methoden wie CSS Grid Layout befassen, die denselben Mustern folgen.

Der Flex-Container

Ein Bereich eines Dokuments, der mit Flexbox gestaltet wird, wird alsFlex-Container bezeichnet. Um einenFlex-Container zu erstellen, setzen Sie diedisplay-Eigenschaft des Bereichs aufflex. Wenn wir dies tun, werden die direkten Kinder dieses Containers zuFlex-Elementen. Sie können explizit steuern, ob der Container selbst inline oder in einem Blockformatierungskontext angezeigt wird, indem Sieinline flex oderinline-flex für Inline-Flex-Container oderblock flex oderflex für Block-Level-Flex-Container verwenden.

Ausgangswerte

Wie bei allen Eigenschaften in CSS sind einige Ausgangswerte definiert, sodass sich der Inhalt eines neuen Flex-Containers folgendermaßen verhält:

• Elemente werden in einer Zeile angezeigt (der Standardwert derflex-direction-Eigenschaft istrow).
• Die Elemente beginnen am Startrand der Hauptachse.
• Die Elemente dehnen sich nicht in der Hauptdimension aus, sondern können schrumpfen (der Standardwert derflex-grow-Eigenschaft eines Flex-Elements ist0, und der Standardwert derflex-shrink-Eigenschaft ist1).
• Die Elemente dehnen sich auf die Größe der Querachse aus (der Standardwert deralign-items-Eigenschaft iststretch).
• Der Standardwert derflex-basis-Eigenschaft eines Flex-Elements istauto. Das bedeutet, dass es im horizontalen Schreibmodus demwidth des Flex-Elements und im vertikalen Schreibmodus demheight des Flex-Elements entspricht. Wenn die entsprechendewidth/height ebenfalls aufauto gesetzt ist, wird stattdessen derflex-basis-Wert voncontent verwendet.
• Alle Elemente befinden sich in einer einzigen Zeile (der Standardwert derflex-wrap-Eigenschaft istnowrap), wobei sie ihren Container überlaufen, wenn ihre kombiniertewidth/height diewidth/height des enthaltenen Elements überschreitet.

Das Ergebnis davon ist, dass sich alle Ihre Elemente in einer Zeile ausrichten und die Größe des Inhalts als ihre Größe in der Hauptachse verwenden. Wenn mehr Elemente vorhanden sind, als in den Container passen, werden sie nicht umbrochen, sondern stattdessen überlaufen. Wenn einige Elemente höher sind als andere, erstrecken sich alle Elemente über die gesamte Länge der Querachse.

Sie können im folgenden Livedemonstration sehen, wie dies aussieht. Klicken Sie auf "Play", um das Beispiel im MDN Playground zu öffnen und die Elemente zu bearbeiten oder neue Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox auszuprobieren:

<div>  <div>One</div>  <div>Two</div>  <div>Three <br />has <br />extra <br />text</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  border: 2px dotted rgb(96 139 168);  display: flex;}

Ändern der flex-direction

Durch das Hinzufügen derflex-direction-Eigenschaft zum Flex-Container können wir die Richtung ändern, in der unsere Flex-Elemente angezeigt werden. Das Festlegen vonflex-direction: row-reverse behält die Elemente in der Zeile bei, jedoch werden die Start- und Endlinien vertauscht.

Wenn wirflex-direction incolumn ändern, wechselt die Hauptachse und unsere Elemente werden jetzt in einer Spalte angezeigt. Setzen Siecolumn-reverse, und die Start- und Endlinien werden erneut vertauscht.

Die folgende Livedemonstration hatflex-direction aufrow-reverse gesetzt. Versuchen Sie die anderen Werte —row,column undcolumn-reverse — um zu sehen, was mit dem Inhalt passiert.

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  border: 2px dotted rgb(96 139 168);  display: flex;  flex-direction: row-reverse;}

Mehrzeilige Flex-Container mit flex-wrap

Obwohl Flexbox ein eindimensionales Modell ist, ist es möglich, dass Flex-Elemente über mehrere Zeilen umgebrochen werden. Wenn Sie dies tun, sollten Sie jede Zeile als neuen Flex-Container betrachten. Jede fehlende Verteilung erfolgt über jede Zeile, ohne Bezugnahme auf die vorhergehenden oder nachfolgenden Zeilen.

Um ein Umbruchverhalten zu bewirken, fügen Sie die Eigenschaftflex-wrap mit dem Wertwrap hinzu. Wenn Ihre Elemente zu groß sind, um alle in einer Zeile angezeigt zu werden, brechen sie in eine weitere Zeile um. Die folgende Livedemonstration enthält Elemente, denen einewidth zugewiesen wurde. Die Gesamtlänge der Elemente ist zu breit für den Flex-Container. Daflex-wrap aufwrap gesetzt ist, brechen die Elemente auf mehrere Zeilen um. Wenn Sie es aufnowrap setzen, was der Ausgangswert ist, werden sie sich verkleinern, um in den Container zu passen. Sie verkleinern sich, weil sie die ursprünglichen Flexbox-Werte verwenden, einschließlichflex-shrink: 1, die es den Elementen ermöglicht zu schrumpfen. Die Verwendung vonnowrap würde einenÜberlauf verursachen, wenn die Elemente nicht schrumpfen könnten oder nicht genug schrumpfen könnten, um zu passen.

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);  width: 200px;}.box {  width: 500px;  border: 2px dotted rgb(96 139 168);  display: flex;  flex-wrap: wrap;}

Erfahren Sie mehr über das Umbrechen von Flex-Elementen im LeitfadenBeherrschung der Umbrüche von Flex-Elementen.

Die flex-flow Kurzschrift

Sie können die zwei Eigenschaftenflex-direction undflex-wrap in derflex-flow Kurzschrift zusammenfassen.

Im folgenden Livedemonstration versuchen Sie, den ersten Wert auf einen der zulässigen Werte fürflex-direction zu ändern -row,row-reverse,column odercolumn-reverse - und ändern Sie auch den zweiten Wert inwrap undnowrap.

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);  width: 200px;}.box {  width: 500px;  border: 2px dotted rgb(96 139 168);  display: flex;  flex-flow: row wrap;}

Auf Flex-Elemente angewendete Eigenschaften

Um die Inline-Größe jedes Flex-Elements zu steuern, richten wir sie direkt über drei Eigenschaften an:

• flex-grow
• flex-shrink
• flex-basis

Wir werden einen kurzen Blick auf diese Eigenschaften unten werfen, aber wenn Sie umfassendere Informationen wünschen, schauen Sie sich den LeitfadenKontrolle der Verhältnisse von Flex-Elementen auf der Hauptachse an.

Bevor wir diese Eigenschaften verstehen können, müssen wir das Konzept desverfügbaren Raums berücksichtigen. Was wir tun, wenn wir den Wert dieser Flex-Eigenschaften ändern, ist die Art und Weise zu ändern, wie verfügbarer Platz zwischen unseren Elementen verteilt wird. Dieses Konzept des verfügbaren Raums ist auch wichtig, wenn wir uns die Ausrichtung von Elementen ansehen.

Wenn wir drei 100 Pixel breite Elemente in einem Container haben, der 500 Pixel breit ist, dann ist der Platz, den wir zum Anordnen unserer Elemente benötigen, 300 Pixel. Das lässt 200 Pixel verfügbaren Platz übrig. Wenn wir die Anfangswerte nicht ändern, wird Flexbox diesen Platz nach dem letzten Element einfügen.

Wenn wir stattdessen möchten, dass die Elemente wachsen und den Platz füllen, dann müssen wir eine Methode zur Verteilung des verbleibenden Platzes zwischen den Elementen haben. Dieflex-Eigenschaften, die wir auf die Elemente selbst anwenden, ermöglichen es uns, zu bestimmen, wie dieser verfügbare Platz unter den verwandten Flex-Elementen verteilt werden soll.

Die flex-basis Eigenschaft

Dieflex-basis definiert die Größe dieses Elements in Bezug auf den Platz, den es als verfügbaren Raum lässt. Der anfängliche Wert dieser Eigenschaft istauto — in diesem Fall schaut der Browser, ob das Element eine Größe hat. Im obigen Beispiel haben alle Elemente eine Breite von 100 Pixeln. Dies wird alsflex-basis verwendet.

Wenn die Elemente keine Größe haben, wird die Größe des Inhalts als Flex-Basis verwendet. Deshalb, wenn wir nurdisplay: flex auf dem Elternteil deklarieren, um Flex-Elemente zu erstellen, bewegen sich alle Elemente in eine Zeile und benötigen nur so viel Platz, wie sie benötigen, um ihren Inhalt anzuzeigen.

Die flex-grow Eigenschaft

Mit derflex-grow-Eigenschaft, die auf einen positiven Integer gesetzt ist, kann das Flex-Element, wenn dort verfügbarer Raum ist, entlang der Hauptachse von seinerflex-basis aus wachsen. Ob sich das Element ausdehnt, um den gesamten verfügbaren Raum auf dieser Achse einzunehmen oder nur einen Teil des verfügbaren Raums, hängt davon ab, ob die anderen Elemente ebenfalls wachsen dürfen und vom Wert ihrerflex-grow-Eigenschaften.

Jedes Element mit einem positiven Wert beansprucht einen Teil des verfügbaren Raums basierend auf ihremflex-grow-Wert. Wenn wir allen unseren Elementen im obigen Beispiel einenflex-grow-Wert von 1 geben, würde der verfügbare Platz im Flex-Container gleichmäßig zwischen unseren Elementen aufgeteilt werden, und sie würden sich auf der Hauptachse zum Füllen des Containers ausdehnen. Wenn wir unserem ersten Element einenflex-grow-Wert von 2 geben und den anderen Elementen jeweils einen Wert von 1, ergeben sich insgesamt 4 Teile; 2 Teile des verfügbaren Raums werden dem ersten Element zugewiesen (100px von 200px im Fall des obigen Beispiels) und den anderen jeweils ein Teil (50px je von den insgesamt 200px).

Die flex-shrink Eigenschaft

Während dieflex-grow-Eigenschaft das Hinzufügen von Platz auf der Hauptachse behandelt, steuert dieflex-shrink-Eigenschaft, wie er entfernt wird. Wenn wir nicht genug Platz im Container haben, um unsere Elemente zu platzieren, undflex-shrink auf einen positiven Integer gesetzt ist, dann kann das Element kleiner als dieflex-basis werden. Wie beiflex-grow können unterschiedliche Werte zugewiesen werden, um dazu zu führen, dass ein Element schneller schrumpft als andere — ein Element mit einem höheren Wert fürflex-shrink wird schneller schrumpfen als seine Geschwister mit niedrigeren Werten.

Ein Element kann auf seinemin-content-Größe schrumpfen. Diese Mindestgröße wird beim Berechnen der tatsächlichen Schrumpfung berücksichtigt, was bedeutet, dassflex-shrink potenziell weniger konsistent in seinem Verhalten alsflex-grow erscheint. Daher werden wir einen detaillierteren Blick darauf werfen, wie dieser Algorithmus im ArtikelKontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse funktioniert.

Kurzschriftwerte für die Flex-Eigenschaften

Sie werden selten dieflex-grow-,flex-shrink- undflex-basis-Eigenschaften einzeln sehen; stattdessen werden sie in derflex-Kurzschrift kombiniert. Dieflex-Kurzschrift ermöglicht Ihnen das Setzen der drei Werte in dieser Reihenfolge —flex-grow,flex-shrink,flex-basis.

Die Livedemonstration unten ermöglicht es Ihnen, die verschiedenen Werte der Flex-Kurzschrift zu testen; denken Sie daran, dass der erste Wertflex-grow ist. Einem positiven Wert zu geben bedeutet, dass das Element wachsen kann. Der zweite Wert istflex-shrink — mit einem positiven Wert können die Elemente schrumpfen, aber nur wenn ihre Gesamtwerte die Hauptachse überlaufen. Der letzte Wert istflex-basis; dies ist der Wert, den die Elemente als Basiswert verwenden, von dem aus sie wachsen und schrumpfen können.

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  border: 2px dotted rgb(96 139 168);  display: flex;}.one {  flex: 1 1 auto;}.two {  flex: 1 1 auto;}.three {  flex: 1 1 auto;}

Es gibt auch einige vordefinierte Kurzschriftwerte, die die meisten Anwendungsfälle abdecken. Sie werden häufig in Tutorials verwendet, und in vielen Fällen sind diese alles, was Sie verwenden müssen. Die vordefinierten Werte sind wie folgt:

• flex: initial
• flex: auto
• flex: none
• flex: <positive-number>

Der Wertinitial ist einCSS-weiter Schlüsselwort, das den Ausgangswert für eine Eigenschaft darstellt. Das Festlegen vonflex: initial setzt das Element auf dieAusgangswerte der drei Langschrifteigenschaften zurück, was das gleiche ist wieflex: 0 1 auto. Der Ausgangswert vonflex-grow ist0, sodass Elemente nicht größer als ihreflex-basis-Größe wachsen werden. Der Ausgangswert vonflex-shrink ist1, sodass Elemente schrumpfen können, wenn sie es müssen, anstatt zu überlaufen. Der Ausgangswert vonflex-basis istauto. Elemente verwenden entweder eine Größe, die auf dem Element in der Hauptdimension festgelegt ist, oder sie erhalten ihre Größe aus der Inhaltsgröße.

Die Verwendung vonflex: auto ist dasselbe wie die Verwendung vonflex: 1 1 auto; dies ist ähnlich wieflex: initial, außer dass die Elemente wachsen und den Container füllen können, sowie schrumpfen, wenn nötig.

Die Verwendung vonflex: none erstellt vollständig unflexible Flex-Elemente. Es ist, als ob Sieflex: 0 0 auto geschrieben hätten. Die Elemente können nicht wachsen oder schrumpfen und werden mit einerflex-basis vonauto unter Verwendung von Flexbox layoutet.

Die Kurzschrift, die Sie häufig in Tutorials sehen, istflex: 1 oderflex: 2 und so weiter. Dies entspricht dem Schreiben vonflex: 1 1 0 oderflex: 2 1 0 und so weiter. Die Elemente erhalten eine Mindestgröße aufgrund vonflex-basis: 0 und wachsen dann proportional, um den verfügbaren Raum zu füllen. In diesem Fall ist derflex-shrink-Wert von1 redundant, da die Elemente mit einer Mindestgröße beginnen — sie erhalten keine Größe, die dazu führen könnte, dass sie den Flex-Container überlaufen.

Versuchen Sie diese Kurzschriftwerte in der Livedemonstration unten.

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  border: 2px dotted rgb(96 139 168);  display: flex;}.one {  flex: 1;}.two {  flex: 1;}.three {  flex: 1;}

Ausrichtung, Rechtfertigung und Verteilung von freiem Raum zwischen Elementen

Ein Hauptmerkmal von Flexbox ist die Fähigkeit, Elemente auf der Haupt- und Querachse auszurichten und zu rechtfertigen und den Platz zwischen Flex-Elementen zu verteilen. Beachten Sie, dass diese Eigenschaften auf dem Flex-Container eingestellt sind, nicht auf den Elementen selbst.

align-items

Diealign-items-Eigenschaft richtet alle Flex-Elemente auf der Querachse aus.

Der Ausgangswert für diese Eigenschaft iststretch und ist der Grund, warum sich Flex-Elemente standardmäßig auf die Höhe des Flex-Containers dehnen (oder auf die Breite, wennflex-direction aufcolumn odercolumn-reverse gesetzt ist). Diese Höhe kann von dem höchsten Element im Container oder der festgelegten Größe auf dem Flex-Container selbst kommen.

Sie könnten stattdessenalign-items aufflex-start oder einfach aufstart setzen, um die Elemente am Anfang des Flex-Containers auszurichten,flex-end oder einfachend, um sie am Ende auszurichten, odercenter, um sie in der Mitte auszurichten. Versuchen Sie dies in der Livedemonstration — ich habe dem Flex-Container eine Höhe gegeben, damit Sie sehen können, wie die Elemente innerhalb des Containers verschoben werden können. Schauen Sie, was passiert, wenn Sie den Wert von align-items einstellen auf:

• stretch
• flex-start
• flex-end
• start
• end
• center
• baseline
• last baseline

<div>  <div>One</div>  <div>Two</div>  <div>Three <br />has <br />extra <br />text</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  width: 500px;  height: 130px;  border: 2px dotted rgb(96 139 168);  display: flex;  align-items: flex-start;}

Diealign-items-Eigenschaft wird auf dem Flex-Container gesetzt und wirkt sich auf alle Flex-Elemente aus. Wenn Sie ein Flex-Element anders als die anderen ausrichten möchten, können Siealign-self auf dem Flex-Element einstellen.

justify-content

Diejustify-content-Eigenschaft wird verwendet, um die Elemente auf der Hauptachse auszurichten, die Richtung, in derflex-direction den Fluss festgelegt hat. Der Ausgangswert istflex-start, was die Elemente am Anfang des Containers ausrichten wird, aber Sie könnten auch den Wert aufflex-end setzen, um sie am Ende auszurichten, odercenter, um sie in der Mitte auszurichten.

Sie können auch den Wertspace-between verwenden, um den gesamten freien Raum, nachdem die Elemente layoutiert wurden, zu verwenden, und ihn gleichmäßig zwischen den Elementen aufzuteilen, sodass zwischen jedem Element der gleiche Raum vorhanden ist. Um einen gleichen Raum an der rechten und linken Seite (oder oben und unten für Spalten) jedes Elements zu haben, verwenden Sie den Wertspace-around. Beispace-around haben die Elemente einen halben Raum an beiden Enden. Oder um Elemente mit gleichen Abständen um sie herum zu platzieren, verwenden Sie den Wertspace-evenly. Beispace-evenly haben die Elemente einen vollständigen Raum an beiden Enden.

Versuchen Sie die folgenden Werte vonjustify-content in der Livedemonstration:

• start
• end
• left
• right
• normal
• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly
• stretch

<div>  <div>One</div>  <div>Two</div>  <div>Three</div></div>

.box > * {  border: 2px solid rgb(96 139 168);  border-radius: 5px;  background-color: rgb(96 139 168 / 0.2);}.box {  border: 2px dotted rgb(96 139 168);  display: flex;  justify-content: flex-start;}

Der ArtikelAusrichtung von Elementen in einem Flex-Container untersucht diese Eigenschaften ausführlicher, um ein besseres Verständnis dafür zu erlangen, wie sie funktionieren. Diese einfachen Beispiele sind jedoch in der Mehrheit der Anwendungsfälle nützlich.

justify-items

Diejustify-items-Eigenschaft wird in Flexbox-Layouts ignoriert.

place-items und place-content

Dieplace-items-Eigenschaft ist eine Kurzschrift füralign-items undjustify-items. Wenn sie auf einem Flex-Container gesetzt ist, wird die Ausrichtung, aber nicht die Rechtfertigung, eingestellt, dajustify-items in Flexbox ignoriert wird.

Es gibt eine andere Kurzschrift-Eigenschaft,place-content, die diealign-content- undjustify-content-Eigenschaften definiert. Diealign-content-Eigenschaft wirkt sich nur auf Flex-Container aus, die umbrechen, und wird im ArtikelAusrichtung von Elementen in einem Flex-Container besprochen.

Nächste Schritte

Nach dem Lesen dieses Artikels sollten Sie ein Verständnis für die Grundfunktionen von Flexbox haben. Im nächsten Artikel werden wir uns anschauen,wie diese Spezifikation in Beziehung zu anderen Teilen von CSS steht.