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

Wenn wir Flexbox als eindimensional beschreiben, sprechen wir darüber, dass Flexbox das Layout in einer Dimension gleichzeitig verarbeitet - entweder als Zeile oder als Spalte. Dies steht im Gegensatz zu dem zweidimensionalen Modell desCSS Grid Layout, das sowohl Spalten als auch Zeilen steuert.

Die zwei Achsen von Flexbox

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

Die Hauptachse

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

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

Wenn Sierow oderrow-reverse wählen, verläuft Ihre Hauptachse entlang der Zeile in derInline-Richtung.

Wählen Siecolumn odercolumn-reverse, und Ihre Hauptachse verläuft in derBlock-Richtung, von oben nach unten.

Die Querachse

DieQuerachse verläuft senkrecht zur Hauptachse. Wenn Ihreflex-direction (Hauptachse) aufrow oderrow-reverse gesetzt ist, verläuft die Querachse durch die Spalten.

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

Anfangs- und Endlinien

Ein weiterer wichtiger Bereich des Verständnisses ist, dass Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. Flexbox geht nicht einfach davon aus, dass alle Textzeilen oben links in einem Dokument beginnen und zur rechten Seite laufen, mit neuen Zeilen, die darunter erscheinen. Vielmehr unterstützt es alle Schreibmodi, wie anderelogische Eigenschaften und Werte.

Sie könnenmehr über den Zusammenhang zwischen Flexbox und Schreibmodi lesen in einem späteren Artikel; die folgende Beschreibung sollte jedoch erklären, warum wir nicht über links und rechts sowie oben und unten sprechen, wenn wir die Richtung beschreiben, in der unsere Flex-Items fließen.

Wenn dieflex-directionrow ist und ich auf Englisch arbeite, befindet sich die Startkante der Hauptachse links, die Endkante rechts.

Wenn ich in Arabisch arbeiten würde, befände sich die Startkante meiner Hauptachse rechts und die Endkante links.

In beiden Fällen befindet sich die Startkante der Querachse oben im Flex-Container und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.

Nach einer Weile wird es natürlich, über Anfang und Ende anstatt über links und rechts zu denken, was Ihnen nützlich sein wird, wenn Sie mit anderen Layout-Methoden wie CSS Grid Layout arbeiten, die denselben Mustern folgen.

Der Flex-Container

Ein Bereich eines Dokuments, der mit Flexbox layoutet 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-Items. Sie können explizit steuern, ob der Container selbst im Inline- oder Block-Formatierungskontext angezeigt wird, indem Sieinline flex oderinline-flex für Inline-Flex-Container oderblock flex oderflex für Block-Level-Flex-Container verwenden.

Anfangswerte

Wie bei allen Eigenschaften in CSS sind einige Anfangswerte definiert, sodass der Inhalt eines neuen Flex-Containers folgendermaßen funktioniert:

• Elemente werden in einer Reihe angezeigt (der Standardwert derflex-direction Eigenschaft istrow).
• Die Elemente beginnen an der Startkante der Hauptachse.
• Die Elemente strecken sich nicht in der Hauptdimension, können aber schrumpfen (der Standardwert derflex-grow Eigenschaft eines Flex-Items ist0 und der derflex-shrink Eigenschaft ist1).
• Die Elemente strecken sich, um die Größe der Querachse auszufüllen (der Standardwert deralign-items Eigenschaft iststretch).
• Der Standardwert derflex-basis Eigenschaft eines Flex-Items istauto. Dies bedeutet, dass es in jedem Fall gleich derwidth des Flex-Items im horizontalen Schreibmodus und derheight im vertikalen Schreibmodus ist. Wenn die entsprechendewidth/height ebenfalls aufauto gesetzt ist, wird stattdessen dercontent Wert vonflex-basis verwendet.
• Alle Elemente befinden sich in einer einzigen Zeile (der Standardwert derflex-wrap Eigenschaft istnowrap), überlaufen ihren Container, wenn ihre kombiniertewidth/height diewidth/height des umgebenden Elements überschreitet.

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

Sie können im lebendigen Beispiel unten sehen, wie das 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 Anfangsverhalten 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;}

Änderung der flex-direction

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

Wenn wir dieflex-direction aufcolumn ändern, wechselt die Hauptachse und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Siecolumn-reverse und die Anfangs- und Endlinien werden erneut vertauscht.

Das lebende Beispiel unten 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, Flex-Items in mehrere Zeilen umzubrechen. Wenn Sie dies tun, sollten Sie jede Zeile als neuen Flex-Container betrachten. Jede Raumverteilung erfolgt über jede Zeile, ohne Rücksicht auf die vorherigen oder nachfolgenden Zeilen.

Um das Umbruchverhalten zu verursachen, fügen Sie die Eigenschaftflex-wrap mit einem Wert vonwrap hinzu. Wenn Ihre Elemente jetzt zu groß sind, um alle in einer Zeile angezeigt zu werden, werden sie in eine andere Zeile umgebrochen. Das lebende Beispiel unten enthält Elemente, die einewidth erhalten haben. Die Gesamtbreite der Elemente ist zu groß für den Flex-Container. Daflex-wrap aufwrap gesetzt ist, werden die Elemente in mehrere Zeilen umgebrochen. Wenn Sie es aufnowrap setzen, was der Anfangswert ist, werden sie schrumpfen, um in den Container zu passen. Sie schrumpfen, weil sie anfängliche Flexbox-Werte verwenden, einschließlichflex-shrink: 1, was es den Elementen erlaubt zu schrumpfen. Die Verwendung vonnowrap würde einOverflow verursachen, wenn die Elemente nicht schrumpfen könnten oder nicht klein 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 Umwickeln von Flex-Items im LeitfadenFlex-Items umwickeln meistern.

Das flex-flow Shorthand

Sie können die zwei Eigenschaftenflex-direction undflex-wrap in dasflex-flow Shorthand kombinieren.

Im lebenden Beispiel unten, versuchen Sie, den ersten Wert in 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;}

Eigenschaften, die auf Flex-Items angewendet werden

Um die Inline-Größe jedes Flex-Items zu steuern, zielen wir direkt auf sie ab, indem wir drei Eigenschaften verwenden:

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

Wir werden einen kurzen Blick auf diese Eigenschaften unten werfen, aber wenn Sie umfassendere Informationen wünschen, werfen Sie einen Blick auf den LeitfadenVerhältnisse von Flex-Items auf der Hauptachse steuern.

Bevor wir diese Eigenschaften sinnvoll verwenden können, müssen wir das Konzept desverfügbaren Raums berücksichtigen. Wenn wir den Wert dieser Flex-Eigenschaften ändern, ändern wir die Art und Weise, wie der verfügbare Raum unter unseren Elementen verteilt wird. Dieses Konzept des verfügbaren Raums ist auch wichtig, wenn wir uns das Ausrichten von Elementen ansehen.

Wenn wir drei 100 Pixel breite Elemente in einem Container haben, der 500 Pixel breit ist, dann benötigen wir 300 Pixel Platz, um unsere Elemente anzuordnen. Dies lässt 200 Pixel verfügbaren Raum. Wenn wir die Anfangswerte nicht ändern, legt Flexbox diesen Raum nach dem letzten Element ab.

Wenn wir stattdessen möchten, dass die Elemente wachsen und den Raum ausfüllen, dann müssen wir eine Methode haben, um den übrig gebliebenen Raum zwischen den Elementen zu verteilen. Dieflex Eigenschaften, die wir den Elementen selbst anwenden, ermöglichen es, wie dieser verfügbare Raum zwischen den untergeordneten Flex-Items verteilt werden sollte.

Die flex-basis Eigenschaft

flex-basis definiert die Größe dieses Elements im Hinblick auf den Raum, den es als verfügbaren Raum hinterlässt. Der Anfangswert dieser Eigenschaft istauto - in diesem Fall prüft 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, dann wird die Größe des Inhalts als flex-basis verwendet. Deshalb, wenn wir einfachdisplay: flex auf dem übergeordneten Element deklarieren, um Flex-Items zu erstellen, bewegen sich alle Elemente in eine Zeile und nehmen nur so viel Platz ein, wie sie benötigen, um ihre Inhalte anzuzeigen.

Die flex-grow Eigenschaft

Wenn dieflex-grow Eigenschaft auf einen positiven Ganzzahlwert gesetzt ist, kann das Flex-Item entlang der Hauptachse von seinemflex-basis aus wachsen, wenn verfügbarer Raum vorhanden ist. Ob das Element sich so weit streckt, dass es den gesamten verfügbaren Raum auf dieser Achse einnimmt, oder nur einen Teil des verfügbaren Raums, hängt davon ab, ob auch die anderen Elemente wachsen dürfen und welchen Wert ihreflex-grow Eigenschaften haben.

Jedes Element mit einem positiven Wert nimmt einen Teil des verfügbaren Raums ein, basierend auf ihremflex-grow Wert. Wenn wir allen unseren Elementen im obigen Beispiel einenflex-grow Wert von 1 geben würden, dann würde der verfügbarer Raum im Flex-Container gleichmäßig zwischen den Elementen geteilt werden, und sie würden sich ausstrecken, um den Container auf der Hauptachse auszufüllen. Wenn wir unserem ersten Element einenflex-grow Wert von 2 geben und den anderen Elementen jeweils einen Wert von 1, gibt es insgesamt 4 Teile; 2 Teile des verfügbaren Raums werden dem ersten Element gegeben (100px von 200px im Beispiel oben) und 1 Teil jeweils den anderen beiden (jeweils 50px von insgesamt 200px).

Die flex-shrink Eigenschaft

Während dieflex-grow Eigenschaft den Platz in der Hauptachse hinzufügt, kontrolliert dieflex-shrink Eigenschaft, wie er weggenommen wird. Wenn wir nicht genug Platz im Container haben, um unsere Elemente anzuordnen, undflex-shrink auf einen positiven Ganzzahlwert gesetzt ist, dann kann das Element kleiner als dieflex-basis werden. Wie beiflex-grow können unterschiedliche Werte zugeordnet werden, um ein Element dazu zu bringen, schneller zu schrumpfen als andere - ein Element mit einem höheren Wert fürflex-shrink wird schneller schrumpfen als seine Geschwister mit niedrigeren Werten.

Ein Element kann bis zu seinermin-content Größe schrumpfen. Diese Mindestgröße wird berücksichtigt, während der tatsächliche Schrumpfungsbetrag berechnet wird, was bedeutet, dassflex-shrink das Potenzial hat, im Verhalten weniger konsistent zu erscheinen alsflex-grow. Daher werden wir uns dieses Algorithmus in dem ArtikelVerhältnisse der Elemente entlang der Hauptachse steuern genauer ansehen.

Shorthand-Werte für die flex Eigenschaften

Sie werden sehr selten dieflex-grow,flex-shrink undflex-basis Eigenschaften einzeln sehen; stattdessen werden sie in dasflex Shorthand kombiniert. Dasflex Shorthand erlaubt es Ihnen, die drei Werte in dieser Reihenfolge zu setzen -flex-grow,flex-shrink,flex-basis.

Im lebenden Beispiel unten können Sie die verschiedenen Werte des flex Shorthands ausprobieren; denken Sie daran, dass der erste Wertflex-grow ist. Wenn Sie diesem einen positiven Wert geben, kann das Element wachsen. Der zweite istflex-shrink - mit einem positiven Wert können sich die Elemente verkleinern, aber nur, wenn ihre Gesamtwerte die Hauptachse überlaufen. Der letzte Wert istflex-basis; dies ist der Wert, den die Elemente als Basiswert verwenden, um von dort aus zu wachsen und zu schrumpfen.

<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 Shorthand-Werte, die die meisten Anwendungsfälle abdecken. Diese werden häufig in Tutorials verwendet, und in vielen Fällen sind dies alle, die Sie verwenden müssen. Die vordefinierten Werte sind wie folgt:

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

Derinitial Wert ist einCSS-weites Schlüsselwort, das den Anfangswert für eine Eigenschaft darstellt. Das Setzen vonflex: initial setzt das Element auf dieAngangswerte der drei Langform-Eigenschaften zurück, was dasselbe ist wieflex: 0 1 auto. Der Anfangswert vonflex-grow ist0, sodass die Elemente nicht größer als ihreflex-basis Größe werden. Der Anfangswert vonflex-shrink ist1, sodass die Elemente schrumpfen können, wenn sie es müssen, anstatt überzulaufen. Der Anfangswert vonflex-basis istauto. Die Elemente verwenden entweder die auf dem Element in der Hauptdimension festgelegte Größe oder erhalten ihre Größe von 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 ausfüllen sowie schrumpfen können, wenn nötig.

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

Das Shorthand, das Sie in Tutorials oft sehen, istflex: 1 oderflex: 2 usw. Das ist dasselbe, wieflex: 1 1 0 oderflex: 2 1 0 usw. zu schreiben. Die Elemente erhalten eine minimale Größ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 minimaler Größe beginnen - sie erhalten keine Größe, die sie dazu bringen könnte, den Flex-Container zu überlaufen.

Versuchen Sie diese Shorthand-Werte im lebenden Beispiel 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 den Haupt- und Querachsen auszurichten und zu rechtfertigen sowie Raum zwischen Flex-Items zu verteilen. Beachten Sie, dass diese Eigenschaften auf den Flex-Container gesetzt werden, nicht auf die Elemente selbst.

align-items

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

Der Anfangswert für diese Eigenschaft iststretch und ist der Grund, warum Flex-Items standardmäßig bis zur Höhe des Flex-Containers gestreckt werden (oder zur Breite, wennflex-direction aufcolumn odercolumn-reverse gesetzt ist). Diese Höhe kann vom höchsten Element im Container oder von der auf den Flex-Container selbst gesetzten Größe stammen.

Sie könnten stattdessenalign-items aufflex-start oder einfachstart setzen, um die Elemente an der Startseite des Flex-Containers auszurichten,flex-end oder einfachend, um sie am Ende auszurichten, odercenter, um sie in der Mitte auszurichten. Versuchen Sie dies im lebenden Beispiel - ich habe dem Flex-Container eine Höhe gegeben, damit Sie sehen können, wie die Elemente im Container bewegt werden können. Sehen Sie, was passiert, wenn Sie den Wert von align-items auf setzen:

• 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 wird auf den Flex-Container gesetzt und betrifft alle Flex-Items. Wenn Sie ein Flex-Item anders als die anderen ausrichten möchten, können Siealign-self auf dem Flex-Item setzen.

justify-content

Diejustify-content Eigenschaft wird verwendet, um die Elemente auf der Hauptachse auszurichten, die Richtung, in dieflex-direction den Fluss gesetzt hat. Der Anfangswert istflex-start, was die Elemente an der startenden Kante des Containers ausrichten wird, aber Sie könnten den Wert auch aufflex-end setzen, um sie am Ende auszurichten, odercenter, um sie in der Mitte zu positionieren.

Sie können auch den Wertspace-between verwenden, um den gesamten freien Platz zu nehmen, nachdem die Elemente angeordnet wurden, und ihn gleichmäßig zwischen den Elementen zu teilen, sodass ein gleicher Abstand zwischen jedem Element entsteht. Um einen gleichen Abstand auf der rechten und linken Seite (oder oben und unten für Spalten) jedes Elements zu erzeugen, verwenden Sie den Wertspace-around. Mitspace-around haben die Elemente einen halben Raum an jedem Ende. Oder um Elemente mit gleichmäßigem Raum um sie herum zu haben, verwenden Sie den Wertspace-evenly. Mitspace-evenly haben die Elemente einen ganzen Raum an jedem Ende.

Versuchen Sie die folgenden Werte vonjustify-content im lebenden Beispiel:

• 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 ArtikelElemente in einem Flex-Container ausrichten untersucht diese Eigenschaften eingehender, um ein besseres Verständnis dafür zu bekommen, wie sie funktionieren. Diese grundlegenden Beispiele sind jedoch für die meisten Anwendungsfälle nützlich.

justify-items

Diejustify-items Eigenschaft wird in Flexbox-Layouts ignoriert.

place-items und place-content

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

Es gibt eine andere Shorthand-Eigenschaft,place-content, die diealign-content undjustify-content Eigenschaften definiert. Diealign-content Eigenschaft beeinflusst nur Flex-Container, die umgebrochen werden, und wird inElemente in einem Flex-Container ausrichten besprochen.

Nächste Schritte

Nach dem Lesen dieses Artikels sollten Sie ein Verständnis für die grundlegenden Funktionen von Flexbox haben. Im nächsten Artikel werden wir uns ansehen,wie diese Spezifikation sich auf andere Teile von CSS bezieht.