Grundkonzepte von Flexbox

Beim Arbeiten mit Flexbox müssen Sie in Bezug auf zwei Achsen denken – die Hauptachse und die Kreuzachse. Die Hauptachse wird durch die Eigenschaft flex-direction definiert, und die Kreuzachse verläuft senkrecht dazu. Alles, was wir mit Flexbox tun, bezieht sich auf diese Achsen, daher ist es sinnvoll, von Anfang an zu verstehen, wie sie funktionieren.

Die Hauptachse wird durch flex-direction definiert, welches vier mögliche Werte hat:

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

Wenn Sie row oder row-reverse wählen, wird Ihre Hauptachse in Inline-Richtung entlang der Zeile verlaufen.

Wählen Sie column oder column-reverse, verläuft Ihre Hauptachse in Block-Richtung, von oben nach unten.

Die Kreuzachse verläuft senkrecht zur Hauptachse. Daher, wenn Ihre flex-direction (Hauptachse) auf row oder row-reverse gesetzt ist, verläuft die Kreuzachse entlang der Spalten.

Wenn Ihre Hauptachse column oder column-reverse ist, verläuft die Kreuzachse entlang der Zeilen.

Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments trifft. Flexbox geht nicht einfach davon aus, dass alle Textzeilen oben links in einem Dokument beginnen und zur rechten Seite verlaufen, wobei neue Zeilen untereinander erscheinen. Vielmehr unterstützt es alle Schreibmodi, wie andere logische Eigenschaften und Werte.

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

Wenn flex-direction row ist und ich in Englisch arbeite, dann wird die Startkante der Hauptachse links sein, die Endkante rechts.

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

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

Nach einer Weile wird es natürlich, in Bezug auf Anfang und Ende statt links und rechts zu denken, und es wird Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden wie CSS Grid Layout zu tun haben, die denselben Mustern folgen.

Ein Bereich eines Dokuments, der mit Flexbox gestaltet wird, wird als Flexcontainer bezeichnet. Um einen Flexcontainer zu erstellen, setzen Sie die Eigenschaft display des Bereichs auf flex. Wenn wir dies tun, werden die direkten Kinder dieses Containers zu Flex-Elementen. Sie können explizit steuern, ob der Container selbst im Inline- oder Block-Formatierungskontext angezeigt wird, indem Sie für Inline-Flexcontainer inline flex oder inline-flex verwenden, oder für Block-Level-Flexcontainer block flex oder flex.

Wie bei allen Eigenschaften in CSS sind einige Anfangswerte definiert, sodass sich die Inhalte eines neuen Flexcontainers folgendermaßen verhalten:

• Elemente werden in einer Zeile angezeigt (der Standardwert der flex-direction Eigenschaft ist row).
• Die Elemente beginnen am Startkante der Hauptachse.
• Die Elemente strecken sich nicht in der Hauptdimension, können aber schrumpfen (der Standardwert der flex-grow Eigenschaft eines Flex-Elements ist 0 und der Standardwert der flex-shrink Eigenschaft ist 1).
• Die Elemente strecken sich, um die Größe der Kreuzachse zu füllen (der Standardwert der align-items Eigenschaft ist stretch).
• Der Standardwert der flex-basis Eigenschaft eines Flex-Elements ist auto. Dies bedeutet, dass es in jedem Fall gleich der width des Flex-Elements im horizontalen Schreibmodus und der height im vertikalen Schreibmodus sein wird. Wenn die korrespondierende width/height ebenfalls auf auto gesetzt ist, wird stattdessen der flex-basis content Wert verwendet.
• Alle Elemente werden in einer einzigen Zeile sein (der Standardwert der flex-wrap Eigenschaft ist nowrap), wobei sie ihren Container überlaufen, wenn ihre kombinierte width/height die width/height des enthaltenden Elements überschreitet.

Das Ergebnis ist, dass Ihre Elemente alle in einer Zeile ausgerichtet werden, wobei die Größe des Inhalts als ihre Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht umgebrochen, sondern stattdessen überlaufen. Wenn einige Elemente höher sind als andere, werden alle Elemente entlang der vollen Länge der Kreuzachse gestreckt.

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

<div class="box">
  <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;
}

Das Hinzufügen der flex-direction Eigenschaft zum Flexcontainer ermöglicht es uns, die Richtung zu ändern, in der unsere Flexelemente angezeigt werden. Das Setzen von flex-direction: row-reverse wird die Elemente in der Zeile halten, jedoch werden die Anfangs- und Endlinien vertauscht.

Wenn wir flex-direction auf column ändern, wechselt die Hauptachse und unsere Elemente sind jetzt in einer Spalte angeordnet. Setzen Sie column-reverse und die Anfangs- und Endlinien werden erneut vertauscht.

Das Live-Beispiel unten hat flex-direction auf row-reverse gesetzt. Versuchen Sie die anderen Werte — row, column und column-reverse — um zu sehen, was mit dem Inhalt passiert.

<div class="box">
  <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;
}

Obwohl Flexbox ein eindimensionales Modell ist, ist es möglich, Flexelemente über mehrere Zeilen hinweg umzubrechen. Wenn Sie dies tun, sollten Sie jede Zeile als neuen Flexcontainer betrachten. Jede Raumverteilung erfolgt über jede Zeile, ohne Bezug auf die vorherigen oder nachfolgenden Zeilen.

Um das Umbruchverhalten zu verursachen, fügen Sie die Eigenschaft flex-wrap mit dem Wert wrap hinzu. Wenn Ihre Elemente zu groß sind, um alle in einer Zeile angezeigt zu werden, werden sie auf eine andere Zeile umgebrochen. Das Live-Beispiel unten enthält Elemente, denen eine Breite gegeben wurde. Die Gesamtbreite der Elemente ist zu breit für den Flexcontainer. Da flex-wrap auf wrap gesetzt ist, werden die Elemente über mehrere Zeilen umgebrochen. Wenn Sie es auf nowrap setzen, was der Anfangswert ist, werden sie schrumpfen, um in den Container zu passen. Sie schrumpfen, da sie anfängliche Flexbox-Werte verwenden, einschließlich flex-shrink: 1, das es den Elementen ermöglicht, zu schrumpfen. Die Verwendung von nowrap würde ein Überlauf verursachen, wenn die Elemente nicht schrumpfen könnten oder nicht klein genug schrumpfen könnten, um zu passen.

<div class="box">
  <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 Umbruch von Flexelementen im Leitfaden Meistern des Umbruchs von Flexelementen.

Sie können die beiden Eigenschaften flex-direction und flex-wrap in die flex-flow Kurzschreibweise kombinieren.

Im Live-Beispiel unten, versuchen Sie den ersten Wert in einen der zulässigen Werte für flex-direction zu ändern - row, row-reverse, column oder column-reverse, und ändern Sie auch die zweite zu wrap und nowrap.

<div class="box">
  <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;
}

Um die Inline-Größe jedes Flexelements zu steuern, zielen wir direkt auf sie mit drei Eigenschaften:

• 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 Leitfaden Steuerung der Verhältnisse von Flexelementen auf der Hauptachse.

Bevor wir diese Eigenschaften sinnvoll betrachten können, müssen wir das Konzept des verfügbaren Raums betrachten. Was wir tun, wenn wir den Wert dieser Flex-Eigenschaften ändern, ist die Art und Weise zu ändern, wie verfügbarer Raum zwischen unseren Elementen verteilt wird. Dieses Konzept des verfügbaren Raums ist auch wichtig, wenn wir uns mit der Ausrichtung von Elementen beschäftigen.

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

Wenn wir stattdessen möchten, dass die Elemente wachsen und den Raum füllen, dann brauchen wir eine Methode, um den verbleibenden Raum zwischen den Elementen zu verteilen. Die flex-Eigenschaften, die wir auf die Elemente selbst anwenden, ermöglichen es, wie dieser verfügbare Raum unter den Geschwister-Flexelementen verteilt werden soll.

Die flex-basis definiert, wie groß dieses Element in Bezug auf den Raum ist, der als verfügbarer Raum verbleibt. Der Anfangswert dieser Eigenschaft ist auto – in diesem Fall überprüft der Browser, ob das Element eine Größe hat. Im obigen Beispiel haben alle Elemente eine Breite von 100 Pixel. Dies wird als flex-basis verwendet.

Wenn die Elemente keine Größe haben, wird die Größe des Inhalts als Flex-Basis genutzt. Deshalb, wenn wir einfach display: flex auf das übergeordnete Element erklären, um Flexelemente zu erstellen, verschieben sich die Elemente alle in eine Zeile und nehmen nur so viel Platz, wie sie benötigen, um ihren Inhalt anzuzeigen.

Mit der flex-grow Eigenschaft auf einen positiven Integer gesetzt, kann das Flexelement, wenn verfügbarer Raum vorhanden ist, entlang der Hauptachse von seiner flex-basis wachsen. Ob sich das Element streckt, um den gesamten verfügbaren Raum auf dieser Achse zu beanspruchen, oder nur einen Teil des verfügbaren Raums, hängt davon ab, ob die anderen Elemente auch wachsen dürfen und der Wert ihrer flex-grow Eigenschaften.

Jedes Element mit einem positiven Wert verbraucht einen Teil des verfügbaren Raums basierend auf seinem flex-grow Wert. Wenn wir allen unseren Elementen im obigen Beispiel einen flex-grow Wert von 1 geben würden, dann würde der verfügbare Raum im Flexcontainer gleichmäßig zwischen unseren Elementen aufgeteilt und sie würden sich ausdehnen, um den Container auf der Hauptachse zu füllen. Wenn wir unserem ersten Element einen flex-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 würden dem ersten Element zugewiesen (100px von 200px im Beispiel oben) und 1 Teil den anderen beiden (jeweils 50px von insgesamt 200px).

Wo die flex-grow Eigenschaft das Hinzufügen von Raum auf der Hauptachse behandelt, kontrolliert die flex-shrink Eigenschaft, wie Raum entfernt wird. Wenn wir nicht genug Platz im Container haben, um unsere Elemente anzuordnen, und flex-shrink auf einen positiven Integer gesetzt ist, dann kann das Element kleiner werden als die flex-basis. Wie bei flex-grow können verschiedene Werte zugewiesen werden, um zu bewirken, dass ein Element schneller schrumpft als andere – ein Element mit einem höheren Wert für flex-shrink wird schneller schrumpfen als seine Geschwister mit niedrigeren Werten.

Ein Element kann auf seine min-content Größe schrumpfen. Diese Mindestgröße wird berücksichtigt, während die tatsächliche Menge an Schrumpfung berechnet wird, was bedeutet, dass flex-shrink das Potenzial hat, weniger konsistent in seinem Verhalten zu erscheinen als flex-grow. Wir werden uns daher eingehender ansehen, wie dieser Algorithmus funktioniert im Artikel Steuerung der Verhältnisse von Elementen entlang der Hauptachse.

Sie werden sehr selten die flex-grow, flex-shrink und flex-basis Eigenschaften einzeln sehen; stattdessen werden sie in der flex Kurzschreibweise kombiniert. Die flex Kurzschreibweise ermöglicht es Ihnen, die drei Werte in dieser Reihenfolge festzulegen — flex-grow, flex-shrink, flex-basis.

Das Live-Beispiel unten erlaubt Ihnen, die verschiedenen Werte der Flex-Kurzschreibweise auszuprobieren; denken Sie daran, dass der erste Wert flex-grow ist. Wenn Sie diesem einen positiven Wert geben, bedeutet das, dass das Element wachsen kann. Der zweite ist flex-shrink — mit einem positiven Wert können die Elemente schrumpfen, aber nur wenn ihre gesamten Werte die Hauptachse überlaufen. Der letzte Wert ist flex-basis; dies ist der Wert, den die Elemente als ihren Basiswert verwenden, um zu wachsen und zu schrumpfen.

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">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 Kurzschreibwerte, die die meisten Anwendungsfälle abdecken. Sie werden diese oft in Tutorials sehen und in vielen Fällen werden diese alles sein, was Sie verwenden müssen. Die vordefinierten Werte sind wie folgt:

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

Der initial Wert ist ein CSS-weit-Wert, der den Anfangswert für eine Eigenschaft repräsentiert. Das Setzen von flex: initial setzt das Element auf die Anfangswerte der drei Langform-Eigenschaften zurück, was dasselbe ist wie flex: 0 1 auto. Der Anfangswert von flex-grow ist 0, daher werden Elemente nicht größer als ihre flex-basis Größe. Der Anfangswert von flex-shrink ist 1, so dass Elemente, wenn nötig, schrumpfen können, anstatt überzulaufen. Der Anfangswert von flex-basis ist auto. Elemente verwenden entweder eine auf dem Element in der Hauptdimension gesetzte Größe, oder sie erhalten ihre Größe aus der Größe des Inhalts.

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

Die Verwendung von flex: none erstellt vollständig unflexible Flexelemente. Es ist so, als ob Sie flex: 0 0 auto geschrieben hätten. Die Elemente können nicht wachsen oder schrumpfen und werden mit Flexbox mit einer flex-basis von auto angeordnet.

Die Kurzschreibweise, die Sie oft in Tutorials sehen, ist flex: 1 oder flex: 2 und so weiter. Dies entspricht dem Schreiben von flex: 1 1 0 oder flex: 2 1 0 und so weiter, jeweils. Die Elemente erhalten eine Mindestgröße aufgrund von flex-basis: 0 und wachsen dann proportional, um den verfügbaren Raum zu füllen. In diesem Fall ist der flex-shrink Wert von 1 redundant, da die Elemente mit der Mindestgröße beginnen – sie erhalten keine Größe, die dazu führen könnte, dass sie den Flexcontainer überlaufen.

Versuchen Sie diese Kurzschreibwerte im Live-Beispiel unten.

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">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;
}

Ein wesentliches Merkmal von Flexbox ist die Fähigkeit, Elemente auf der Haupt- und Kreuzachse auszurichten und zu rechtfertigen sowie Raum zwischen den Flexelementen zu verteilen. Beachten Sie, dass diese Eigenschaften auf den Flexcontainer gesetzt werden, nicht auf die Elemente selbst.

Die align-items Eigenschaft richtet alle Flexelemente auf der Kreuzachse aus.

Der Anfangswert für diese Eigenschaft ist stretch, was der Grund ist, warum Flexelemente standardmäßig auf die Höhe des Flexcontainers strecken (oder die Breite, wenn flex-direction auf column oder column-reverse gesetzt ist). Diese Höhe kann von dem höchsten Element im Container oder der auf den Flexcontainer selbst gesetzten Größe kommen.

Sie könnten stattdessen align-items auf flex-start oder einfach start setzen, um die Elemente am Anfang des Flexcontainers auszurichten, flex-end oder einfach end, um sie am Ende auszurichten, oder center, um sie in der Mitte auszurichten. Versuchen Sie dies im Live-Beispiel — ich habe dem Flexcontainer eine Höhe gegeben, damit Sie sehen können, wie sich die Elemente im Container bewegen können. Sehen Sie, was passiert, wenn Sie den Wert von align-items auf folgende setzen:

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

<div class="box">
  <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;
}

Das align-items wird auf den Flexcontainer gesetzt und beeinflusst alle Flexelemente. Wenn Sie ein Flexelement anders ausrichten möchten als andere, können Sie die Eigenschaft align-self auf dem Flexelement selbst setzen.

Die justify-content Eigenschaft wird verwendet, um die Elemente auf der Hauptachse auszurichten, in der Richtung, in die flex-direction den Fluss gesetzt hat. Der Anfangswert ist flex-start, was die Elemente an der Startkante des Containers ausrichtet, aber Sie könnten auch den Wert auf flex-end setzen, um sie am Ende auszurichten, oder center, um sie in der Mitte auszurichten.

Sie können auch den Wert space-between verwenden, um den gesamten freien Platz, nachdem die Elemente angeordnet wurden, gleichmäßig zwischen den Elementen zu verteilen, sodass es einen gleichen Abstand zwischen jedem Element gibt. Um einen gleichen Abstand rechts und links (oder oben und unten bei Spalten) jedes Elements zu erzeugen, verwenden Sie den Wert space-around. Mit space-around haben Elemente einen halben Abstand an beiden Enden. Oder, um Elemente mit gleichem Abstand um sie herum zu erzeugen, verwenden Sie den Wert space-evenly. Mit space-evenly haben Elemente einen vollen Abstand an beiden Enden.

Probieren Sie die folgenden Werte von justify-content im Live-Beispiel aus:

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

<div class="box">
  <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 Artikel Ausrichtung von Elementen in einem Flexcontainer untersucht diese Eigenschaften ausführlicher, um ein besseres Verständnis davon zu haben, wie sie funktionieren. Diese grundlegenden Beispiele sind jedoch in der Mehrheit der Anwendungsfälle nützlich.

Die justify-items Eigenschaft wird bei Flexbox-Layouts ignoriert.

Die place-items Eigenschaft ist eine Kurzschreibweise für align-items und justify-items. Wenn sie auf einem Flexcontainer gesetzt ist, setzt sie die Ausrichtung, jedoch nicht die Rechtfertigung, da justify-items bei Flexbox ignoriert wird.

Es gibt eine andere Kurzschreibweise, place-content, die die align-content und justify-content Eigenschaften definiert. Die align-content Eigenschaft wirkt sich nur auf Flexcontainer aus, die umgebrochen werden, und wird in Ausrichtung von Elementen in einem Flexcontainer diskutiert.

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.