Flexbox

CSS Flexible Box Layout ermöglicht Ihnen:

• Einen Block von Inhalten vertikal innerhalb seines Elternteils zu zentrieren.
• Alle Kinder eines Containers so viel wie möglich vom verfügbaren Platz einnehmen zu lassen, unabhängig davon, wie viel Breite/Höhe verfügbar ist.
• Alle Spalten in einem mehrspaltigen Layout auf die gleiche Höhe zu bringen, auch wenn sie unterschiedliche Mengen an Inhalt enthalten.

Vielleicht sind Flexbox-Funktionen die perfekte Lösung für Ihre ein dimensionalen Layout-Bedürfnisse. Lassen Sie uns das genauer untersuchen!

In diesem Artikel arbeiten Sie eine Reihe von Übungen durch, um Ihnen zu helfen, zu verstehen, wie Flexbox funktioniert. Um zu beginnen, sollten Sie eine lokale Kopie der ersten Starter-Datei — flexbox0.html aus unserem GitHub-Repo machen. Laden Sie diese in einem modernen Browser (wie Firefox oder Chrome) und werfen Sie einen Blick auf den Code in Ihrem Code-Editor. Sie können es auch hier live sehen.

Sie werden sehen, dass wir ein <header>-Element mit einer Hauptüberschrift darin und ein <section>-Element mit drei <article>s haben. Wir werden diese verwenden, um ein ziemlich standardmäßiges dreispaltiges Layout zu erstellen.

Zu Beginn müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von display beim Elternelement der Elemente, die Sie beeinflussen möchten. In diesem Fall wollen wir die <article>-Elemente anordnen, also setzen wir dies auf dem <section>:

section {
  display: flex;
}

Dies bewirkt, dass das <section> Element zu einem Flex-Container wird und seine Kinder zu Flex-Elementen. So sieht es aus:

Diese eine Erklärung gibt uns alles, was wir brauchen. Unglaublich, nicht wahr? Wir haben ein mehrspaltiges Layout mit gleich großen Spalten, und die Spalten sind alle gleich hoch. Das liegt daran, dass die Standardwerte, die den Flex-Elementen (den Kindern des Flex-Containers) zugewiesen sind, eingerichtet wurden, um häufige Probleme wie dieses zu lösen.

Lassen Sie uns zusammenfassen, was hier passiert. Einem Element einen display-Wert von flex hinzuzufügen, macht es zu einem Flex-Container. Der Container wird im Sinne, wie er mit dem Rest der Seite interagiert, als Block-Level-Inhalt angezeigt. Wenn das Element in einen Flex-Container konvertiert wird, werden seine Kinder in Flex-Elemente umgewandelt und angeordnet.

Sie können den Container auch inline machen, indem Sie einen externen display-Wert verwenden (z.B. display: inline flex), was beeinflusst, wie der Container selbst auf der Seite angeordnet wird. Der Legacy-Wert inline-flex zeigt den Container ebenfalls inline an. In diesem Tutorial konzentrieren wir uns darauf, wie sich die Inhalte des Containers verhalten, aber wenn Sie den Effekt des Inline-gegen-Block-Layouts sehen möchten, können Sie einen Blick auf den Wertvergleich auf der display Eigenschaften Seite werfen.

Die nächsten Abschnitte erklären im Detail, was Flex-Elemente sind und was innerhalb eines Elements passiert, wenn Sie es zu einem Flex-Container machen.

Wenn Elemente als Flex-Elemente angeordnet werden, werden sie entlang zweier Achsen angeordnet:

• Die Hauptachse ist die Achse, die in Richtung verläuft, in dem die Flex-Elemente angeordnet sind (zum Beispiel als Reihe über die Seite, oder als Spalte entlang der Seite). Der Anfang und das Ende dieser Achse werden als main start und main end bezeichnet. Die Länge von der Main-Start-Kante bis zur Main-End-Kante ist die Main Size.
• Die Querachse ist die Achse, die senkrecht zur Richtung verläuft, in der die Flex-Elemente angeordnet sind. Der Anfang und das Ende dieser Achse werden als cross start und cross end bezeichnet. Die Länge von der Cross-Start-Kante bis zur Cross-End-Kante ist die Cross Size.
• Das Elternelement, das display: flex darauf gesetzt hat (das <section> in unserem Beispiel), wird als Flex-Container bezeichnet.
• Die als flexible Boxen angeordneten Elemente innerhalb des Flex-Containers werden als Flex-Elemente bezeichnet (die <article>-Elemente in unserem Beispiel).

Behalten Sie diese Terminologie im Hinterkopf, während Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie bei einem der verwendeten Begriffe unsicher werden.

Flexbox bietet eine Eigenschaft namens flex-direction, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die Flexbox-Kinder angeordnet sind). Standardmäßig ist dies auf row gesetzt, was dazu führt, dass sie in einer Reihe in der Richtung Ihrer Browsersprache angeordnet werden (von links nach rechts im Fall eines englischen Browsers).

Versuchen Sie, die folgende Erklärung zu Ihrer <section>-Regel hinzuzufügen:

flex-direction: column;

Sie werden sehen, dass dies die Elemente wieder in ein Spalten-Layout bringt, ähnlich wie sie waren, bevor wir CSS hinzugefügt haben. Bevor Sie weitermachen, löschen Sie diese Erklärung aus Ihrem Beispiel.

Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass irgendwann Ihre Flexbox-Kinder ihren Container überlaufen und das Layout brechen. Werfen Sie einen Blick auf unser Beispiel flexbox-wrap0.html und versuchen Sie, es live zu betrachten (nehmen Sie jetzt eine lokale Kopie dieser Datei mit, wenn Sie diesem Beispiel folgen möchten):

Hier sehen wir, dass die Kinder tatsächlich aus ihrem Container herausbrechen. Standardmäßig versucht der Browser, alle Flex-Elemente in einer einzigen Zeile zu platzieren, wenn die flex-direction auf row gesetzt ist, oder in einer einzelnen Spalte, wenn die flex-direction auf column gesetzt ist. Eine Möglichkeit, wie Sie dies beheben können, ist die folgende Erklärung zu Ihrer <section>-Regel hinzuzufügen:

flex-wrap: wrap;

Fügen Sie auch die folgende Erklärung zu Ihrer <article>-Regel hinzu:

flex: 200px;

Versuchen Sie es jetzt. Sie werden sehen, dass das Layout mit dieser enthaltenen Erklärung viel besser aussieht:

Wir haben jetzt mehrere Zeilen. Jede Zeile enthält so viele Flexbox-Kinder, wie sinnvoll ist. Ein Überlauf wird zu der nächsten Zeile verschoben. Die flex: 200px Erklärung, die bei den Artikeln gesetzt ist, bedeutet, dass jeder mindestens 200px breit sein wird. Wir werden diese Eigenschaft später noch genauer besprechen. Sie haben vielleicht auch bemerkt, dass die letzten paar Kinder in der letzten Zeile jeweils etwas breiter gemacht werden, sodass die gesamte Zeile noch gefüllt ist.

Aber es gibt noch mehr, was wir hier tun können. Versuchen Sie zuerst, Ihre flex-direction-Eigenschaft auf row-reverse zu ändern. Jetzt sehen Sie, dass Sie immer noch Ihr mehrzeiliges Layout haben, aber es beginnt in der gegenüberliegenden Ecke des Browserfensters und fließt umgekehrt.

An dieser Stelle ist es erwähnenswert, dass es eine Kurzform für flex-direction und flex-wrap gibt: flex-flow. So können Sie zum Beispiel

flex-direction: row;
flex-wrap: wrap;

durch

flex-flow: row wrap;

ersetzen.

Kehren wir jetzt zu unserem ersten Beispiel zurück und schauen wir, wie wir kontrollieren können, wie viel Raum Flex-Elemente im Vergleich zu anderen Flex-Elementen einnehmen. Öffnen Sie Ihre lokale Kopie von flexbox0.html, oder nehmen Sie eine Kopie von flexbox1.html als neuen Ausgangspunkt (sehen Sie es live).

Fügen Sie zuerst die folgende Regel am Ende Ihres CSS hinzu:

article {
  flex: 1;
}

Dies ist ein proportionaler Wert ohne Einheit, der bestimmt, wie viel verfügbarer Platz entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem <article>-Element den gleichen Wert (einen Wert von 1), was bedeutet, dass sie alle den gleichen Anteil des verbleibenden Platzes einnehmen, nachdem Eigenschaften wie Padding und Margin gesetzt wurden. Dieser Wert wird proportional unter den Flex-Elementen geteilt: jedem Flex-Element einen Wert von 400000 zu geben, hätte genau den gleichen Effekt.

Fügen Sie jetzt folgende Regel unter der vorherigen hinzu:

article:nth-of-type(3) {
  flex: 2;
}

Nun, wenn Sie die Seite aktualisieren, werden Sie sehen, dass das dritte <article> doppelt so viel der verfügbaren Breite einnimmt wie die anderen beiden. Es gibt jetzt vier proportionale Einheiten im Gesamtwert (da 1 + 1 + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, also nehmen sie jeweils 1/4 des verfügbaren Raums ein. Das dritte hat zwei Einheiten, also nimmt es 2/4 des verfügbaren Raums ein (oder die Hälfte).

Sie können auch einen Minimalwert für die Größe innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre bestehenden Artikel-Regeln wie folgt zu aktualisieren:

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

Dies besagt im Grunde: "Jedes Flex-Element erhält zunächst 200px des verfügbaren Platzes. Danach wird der restliche verfügbare Platz nach den proportionellen Einheiten geteilt." Versuchen Sie, die Seite zu aktualisieren, und Sie werden einen Unterschied darin sehen, wie der Platz geteilt wird.

Alle Flex-Elemente haben eine Mindestbreite von 200 Pixeln — festgelegt mit 'flex'. Der Wert von flex für die ersten beiden Flex-Elemente ist 1 und für das dritte Element ist 2. Dies teilt den verbleibenden Raum im Flex-Container in 4 proportionale Einheiten auf. Eine Einheit wird jedem der ersten beiden Flex-Elemente zugeordnet und 2 Einheiten werden dem dritten Flex-Element zugeordnet, wodurch das dritte Flex-Element breiter ist als die anderen beiden, die die gleiche Breite haben.

Der wahre Wert von Flexbox zeigt sich in seiner Flexibilität/Anpassungsfähigkeit. Wenn Sie das Browserfenster skalieren oder ein weiteres <article>-Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.

flex ist eine Kurzschreibweise, die bis zu drei verschiedene Werte angeben kann:

• Der oben diskutierte proportionale Wert ohne Einheit. Dies kann separat mit der Langform-Eigenschaft flex-grow angegeben werden.
• Ein zweiter proportionale Wert ohne Einheit, flex-shrink, der ins Spiel kommt, wenn die Flex-Elemente ihren Container überlaufen. Dieser Wert gibt an, wie viel ein Element schrumpfen wird, um ein Überlaufen zu verhindern. Dies ist eine ziemlich erweiterte Flexbox-Funktion, und wir werden sie in diesem Artikel nicht weiter behandeln.
• Der oben diskutierte Mindestgröße-Wert. Dies kann separat mit der Langform-Eigenschaft flex-basis angegeben werden.

Wir raten davon ab, die Langform-Flex-Eigenschaften zu verwenden, es sei denn, Sie müssen es wirklich (zum Beispiel, um etwas zuvor Festgelegtes zu überschreiben). Sie führen dazu, dass viel zusätzlicher Code geschrieben wird und können etwas verwirrend sein.

Sie können Flexbox-Funktionen auch verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Lassen Sie uns dies erkunden, indem wir uns ein neues Beispiel ansehen: flex-align0.html (sehen Sie es live). Wir werden dies in eine saubere, flexible Schaltflächen-/Werkzeugleiste umwandeln. Im Moment sehen Sie eine horizontale Menüleiste mit einigen in die obere linke Ecke gequetschten Schaltflächen.

Nehmen Sie zuerst eine lokale Kopie dieses Beispiels.

Fügen Sie nun folgendes am Ende der CSS-Datei hinzu:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt schön horizontal und vertikal zentriert sind. Wir haben dies über zwei neue Eigenschaften erreicht. Die Flex-Elemente sind in der Mitte der Querachse positioniert, indem die align-items Eigenschaft auf center gesetzt wird. Die Flex-Elemente sind gleichmäßig entlang der Hauptachse durch die justify-content Eigenschaft auf space-around verteilt.

Die align-items-Eigenschaft steuert, wo die Flex-Elemente auf der Querachse positioniert sind.

• Standardmäßig hat diese den Wert normal, welcher sich in Flexbox wie stretch verhält. Dies streckt alle Flex-Elemente, um den Elternteil in Richtung der Querachse zu füllen. Wenn der Elternteil in Richtung der Querachse keine feste Größe hat, werden alle Flex-Elemente so hoch (oder breit) wie das höchste (oder breiteste) Flex-Element. So hatten in unserem ersten Beispiel die Spalten standardmäßig die gleiche Höhe.
• Der center-Wert, den wir in unserem obigen Code verwendet haben, sorgt dafür, dass die Elemente ihre intrinsischen Dimensionen beibehalten, aber entlang der Querachse zentriert werden. Deshalb sind in unserem aktuellen Beispiel die Schaltflächen vertikal zentriert.
• Sie können auch Werte wie flex-start, self-start oder start und flex-end, self-end oder end haben, die alle Elemente am Anfang oder Ende der Querachse ausrichten. Die baseline-Werte richten die Flex-Elemente an ihrer Basislinie aus; im Grunde wird die Unterseite der ersten Textzeile jedes Flex-Elements mit der Unterseite der ersten Zeile des Elements mit dem größten Abstand zwischen der Quer-Start-Linie und dieser Basislinie ausgerichtet. Siehe align-items für alle Details.

Sie können das Verhalten von align-items für einzelne Flex-Elemente auch überschreiben, indem Sie darauf die align-self-Eigenschaft anwenden. Zum Beispiel, versuchen Sie folgendes zu Ihrem CSS hinzuzufügen:

button:first-child {
  align-self: flex-end;
}

Schauen Sie sich an, welche Wirkung dies hat und entfernen Sie es wieder, wenn Sie fertig sind.

justify-content steuert, wo die Flex-Elemente auf der Hauptachse positioniert sind.

• Der Standardwert ist normal, welcher sich wie start verhält, was alle Elemente am Anfang der Hauptachse platziert.
• Sie können end oder flex-end verwenden, um sie am Ende auszurichten.
• Die Werte left und right verhalten sich wie start oder end, abhängig von der Schreibrichtung.
• center ist ebenfalls ein Wert für justify-content. Es sorgt dafür, dass die Flex-Elemente in der Mitte der Hauptachse angeordnet werden.
• Der oben verwendete Wert space-around ist nützlich — er verteilt alle Elemente gleichmäßig entlang der Hauptachse mit etwas Platz an den Rändern.
• Es gibt noch einen weiteren Wert, space-between, welcher space-around sehr ähnelt, außer dass er keinen Platz an den Rändern lässt.

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

Wir möchten Sie ermutigen, mit diesen Werten zu spielen, um zu sehen, wie sie funktionieren, bevor Sie weitermachen.

Flexbox verfügt auch über eine Funktion zum Ändern der Anzeigereihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu ändern. Dies ist etwas, das mit traditionellen Layoutmethoden unmöglich ist.

Versuchen Sie, die folgende CSS zu Ihrem Button-Leisten-Beispiel hinzuzufügen:

button:first-child {
  order: 1;
}

Aktualisieren Sie die Seite und Sie werden sehen, dass sich die "Smile"-Schaltfläche an das Ende der Hauptachse bewegt hat. Lassen Sie uns im Detail darüber sprechen, wie dies funktioniert:

• Standardmäßig haben alle Flex-Elemente den order-Wert von 0.
• Flex-Elemente mit höheren angegebenen Order-Werten werden später in der Anzeigereihenfolge als Elemente mit niedrigeren Order-Werten erscheinen.
• Flex-Elemente mit dem gleichen Order-Wert erscheinen in ihrer Quellreihenfolge. Wenn Sie vier Elemente haben, deren Order-Werte 2, 1, 1 und 0 sind, wäre ihre Anzeigereihenfolge 4., 2., 3. und 1.
• Das 3. Element erscheint nach dem 2., weil es den gleichen Order-Wert hat und im Quellcode danach kommt.

Sie können negative Order-Werte festlegen, um Elemente früher als Elemente mit einem Wert von 0 erscheinen zu lassen. Zum Beispiel könnten Sie die "Blush"-Schaltfläche mit der folgenden Regel an den Anfang der Hauptachse bringen:

button:last-child {
  order: -1;
}

Obwohl Sie die Reihenfolge mit order ändern können, bleibt die Tabulatorderung die gleiche wie die Code-Reihenfolge. Das Ändern der Reihenfolge von fokussierbaren Elementen kann die Benutzbarkeit für Ihre Tastaturnutzer negativ beeinflussen!

Es ist möglich, einige ziemlich komplexe Layouts mit Flexbox zu erstellen. Es ist völlig in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, sodass seine Kinder ebenfalls als flexible Boxen angeordnet werden. Werfen Sie einen Blick auf complex-flexbox.html (Live ansehen).

Dieses komplexe Layout hat einige Flex-Elemente, die auch Flex-Container sind. Das HTML dafür ist ziemlich unkompliziert. Wir haben ein <section>-Element, das drei <article>s enthält. Das dritte <article> enthält drei <div>s, und das erste <div> enthält fünf <button>s:

section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button

Schauen wir uns den Code an, den wir für das Layout verwendet haben.

Zuerst setzen wir fest, dass die Kinder des <section> als flexible Boxen angeordnet werden.

section {
  display: flex;
}

Dann setzen wir einige Flex-Werte auf die <article>s selbst. Beachten Sie insbesondere die zweite Regel: Wir setzen das dritte <article> so fest, dass seine Kinder ebenfalls wie Flex-Elemente angeordnet werden, aber diesmal als Spalte.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Dann wählen wir das erste <div> aus. Wir verwenden zuerst flex: 1 100px;, um ihm effektiv eine Mindesthöhe von 100px zu geben, dann setzen wir seine Kinder (die <button>-Elemente) so, dass sie ebenfalls als Flex-Elemente angeordnet werden. Hier ordnen wir sie in einer umbrechenden Zeile an und richten sie in der Mitte des verfügbaren Platzes aus, wie wir es mit dem einzelnen Button-Beispiel bereits gesehen haben.

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Zum Schluss setzen wir einige Größen bei den Schaltflächen. Diesmal geben wir ihnen einen Flex-Wert von 1 auto. Dies hat einen sehr interessanten Effekt, den Sie sehen, wenn Sie die Breite Ihres Browserfensters ändern. Die Schaltflächen nehmen so viel Platz ein, wie sie können. So viele Schaltflächen passen in eine Zeile, wie angenehm ist; darüber hinaus fallen sie in eine neue Zeile.

button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich noch an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihr Können: Flexbox.

Das war unser Überblick über die Grundlagen von Flexbox. Wir hoffen, dass es Ihnen Spaß gemacht hat und Sie es weiter mit Flexbox ausprobieren, während Sie Ihr Lernen fortsetzen. Als Nächstes schauen wir uns einen weiteren wichtigen Aspekt von CSS-Layouts an: CSS-Grids.

• Grundlegende Konzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Reihenfolge von Flex-Elementen
• Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse
• CSS Flexible Box Layout Modul
• CSS-Tricks Leitfaden zu Flexbox — ein Artikel, der alles über Flexbox auf visuell ansprechende Weise erklärt
• Flexbox Froggy — ein Lernspiel, um die Grundlagen von Flexbox zu erlernen und besser zu verstehen

• Zurück
• Übersicht: CSS Layout
• Weiter