Flexbox

Warum Flexbox?

Der flexible Box-Layout von CSS ermöglicht Ihnen:

• Ein Block von Inhalten vertikal innerhalb seines Elternteils zu zentrieren.
• Alle Kinder eines Containers so viel verfügbaren Breiten-/Höhenraum einnehmen zu lassen, unabhängig davon, wie viel Breite/Höhe verfügbar ist.
• Alle Spalten in einem Layout mit mehreren Spalten gleich hoch zu machen, auch wenn sie unterschiedliche Inhalte haben.

Flexbox-Funktionen könnten die perfekte Lösung für Ihre eindimensionalen Layoutanforderungen sein. Lassen Sie uns tief eintauchen und es herausfinden!

Einführung eines einfachen Beispiels

In diesem Artikel werden Sie eine Reihe von Übungen durchgehen, um Ihnen zu helfen, zu verstehen, wie Flexbox funktioniert. Um zu beginnen, sollten Sie eine lokale Kopie des HTML und CSS erstellen. Laden Sie es in einen modernen Browser (wie Firefox oder Chrome) und sehen Sie sich den Code in Ihrem Code-Editor an. Alternativ klicken Sie auf die Schaltfläche "Play", um es im Playground zu öffnen.

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
section {
  zoom: 0.8;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
/* Add your flexbox CSS below here */

Sie werden sehen, dass wir ein <header>-Element mit einer Überschrift der obersten Ebene darin und ein <section>-Element, das drei <article>s enthält, haben. Wir werden diese verwenden, um ein ziemlich standardmäßiges Drei-Spalten-Layout zu erstellen.

Festlegen, welche Elemente als flexible Boxen ausgelegt werden sollen

Zunächst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von display auf das übergeordnete Element der Elemente, die Sie anpassen möchten. In diesem Fall möchten wir die <article>-Elemente anordnen, also setzen wir dies auf das <section>:

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
section {
  zoom: 0.8;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
/* Add your flexbox CSS below here */

section {
  display: flex;
}

Das führt dazu, dass das <section>-Element zu einem Flex-Container wird und seine Kinder zu Flex-Elementen. So sieht es aus:

Diese einzige Deklaration gibt uns alles, was wir brauchen. Unglaublich, oder? Wir haben ein Layout mit mehreren Spalten und gleich großen Spalten, und die Spalten haben alle dieselbe Höhe. Das liegt daran, dass die Standardwerte, die Flex-Elementen (den Kindern des Flex-Containers) zugewiesen werden, so eingerichtet sind, um häufige Probleme wie dieses zu lösen.

Fassen wir zusammen, was hier passiert. Das Hinzufügen eines display-Wertes von flex zu einem Element macht es zu einem Flex-Container. Der Container wird als Block-Inhalt dargestellt, was betrifft, wie er mit dem Rest der Seite interagiert. Wenn das Element zu einem Flex-Container gemacht wird, werden seine Kinder zu (und werden als) Flex-Elemente angeordnet.

Sie können den Container inline machen, indem Sie einen outside display Wert verwenden (z.B. display: inline flex), was beeinflusst, wie der Container selbst auf der Seite angeordnet wird. Der veraltete inline-flex Display-Wert stellt den Container ebenfalls inline dar. Wir werden uns in diesem Tutorial darauf konzentrieren, wie sich die Inhalte des Containers verhalten. Wenn Sie jedoch den Effekt einer Inline- versus Block-Anordnung sehen möchten, können Sie sich den Wertvergleich auf der Seite der display Eigenschaft ansehen.

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.

Das Flex-Modell

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

• Die Hauptachse ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z.B. als Zeile über die Seite, oder als Spalte die Seite hinunter). Die Start- und Endpunkte dieser Achse werden als main start und main end bezeichnet. Die Länge von der Main-Startkante bis zur Main-Endkante ist die Main Size.
• Die Querachse ist die Achse, die senkrecht zur Richtung verläuft, in der die Flex-Elemente angeordnet sind. Die Start- und Endpunkte dieser Achse werden als cross start und cross end bezeichnet. Die Länge von der Cross-Startkante bis zur Cross-Endkante ist die Cross Size.
• Das übergeordnete Element, bei dem display: flex gesetzt ist (das <section> in unserem Beispiel), wird als Flex-Container bezeichnet.
• Die Elemente, die als flexible Boxen im Flex-Container angeordnet sind, werden Flex-Elemente genannt (die <article>-Elemente in unserem Beispiel).

Merken Sie sich diese Begriffe, während Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie verwirrt sind über einen der verwendeten Begriffe.

Spalten oder Zeilen?

Flexbox bietet eine Eigenschaft namens flex-direction, die angibt, in welche Richtung die Hauptachse verläuft (in welcher Richtung die Flexbox-Kinder angeordnet werden). Standardmäßig ist dies auf row gesetzt, was bewirkt, dass sie in der Richtung angeordnet werden, in der die Standardsprache Ihres Browsers verläuft (von links nach rechts, im Falle eines englischen Browsers).

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

flex-direction: column;

Sie werden sehen, dass dies die Elemente wieder in eine Spaltenanordnung bringt, ähnlich wie sie waren, bevor wir CSS hinzugefügt haben. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.

Umbruch

Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder irgendwann ihren Container überlaufen und das Layout zerstören. Im folgenden Beispiel haben wir 5 <article>s, die nicht passen, weil sie eine min-width von 400px haben, sodass es einen horizontalen Bildlauf gibt.

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Fourth article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Fifth article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  min-width: 400px;
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  display: flex;
  flex-direction: row;
  zoom: 0.8;
}

Hier sehen wir, dass die Kinder tatsächlich aus ihrem Container brechen. Standardmäßig versucht der Browser, alle Flex-Elemente in einer einzigen Zeile anzuordnen, wenn flex-direction auf row gesetzt ist, oder in einer einzigen Spalte, wenn flex-direction auf column gesetzt ist.

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Fourth article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Fifth article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  min-width: 400px;
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  display: flex;
  flex-direction: row;
  zoom: 0.8;
}

Eine Möglichkeit, dies zu beheben, ist, die folgende Deklaration zu Ihrer <section>-Regel hinzuzufügen:

section {
  flex-wrap: wrap;
}

Sie werden sehen, dass das Layout mit diesem hinzugefügten viel besser aussieht:

Wir haben jetzt mehrere Zeilen. Jede Zeile hat so viele Flexbox-Kinder, wie vernünftig ist. Jeglicher Überlauf wird auf die nächste Zeile verschoben.

Aber es gibt noch mehr, was wir hier tun können. Versuchen Sie zuerst, den Wert Ihrer flex-direction-Eigenschaft auf row-reverse zu ändern. Jetzt sehen Sie, dass Sie immer noch Ihr Layout mit mehreren Zeilen haben, aber es beginnt von der gegenüberliegenden Ecke des Browser-Fensters und fließt rückwärts.

flex-flow Shorthand

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

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

durch

flex-flow: row wrap;

ersetzen.

Flexible Größenanpassung von Flex-Elementen

Kehren wir nun zu unserem ersten Beispiel zurück und schauen, wie wir kontrollieren können, welcher Anteil des Platzes Flex-Elemente im Vergleich zu den anderen Flex-Elementen einnehmen.

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  zoom: 0.8;
  display: flex;
}

Fügen Sie in Ihrer lokalen Kopie die folgende Regel am Ende Ihres CSS hinzu:

article {
  flex: 1;
}

Dies ist ein einheitsloser Proportionswert, der bestimmt, wie viel Platz entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnehmen wird. In diesem Fall geben wir jedem <article>-Element den gleichen Wert (einen Wert von 1), was bedeutet, dass sie alle einen gleichen Anteil des verbleibenden Raums einnehmen, nachdem Eigenschaften wie padding und margin festgelegt wurden. Dieser Wert wird proportional unter den Flex-Elementen aufgeteilt: Wenn Sie jedem Flex-Element einen Wert von 400000 geben, hätte das exakt den gleichen Effekt.

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  zoom: 0.8;
  display: flex;
}
article {
  flex: 1;
}

Fügen Sie nun die folgende Regel unter der vorherigen hinzu:

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

Wenn Sie jetzt aktualisieren, werden Sie sehen, dass das dritte <article> doppelt so viel von der verfügbaren Breite einnimmt wie die anderen beiden. Jetzt gibt es insgesamt vier Proportionseinheiten (da 1 + 1 + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Raums einnehmen. Das dritte hat zwei Einheiten, sodass es 2/4 des verfügbaren Raums einnimmt (oder die Hälfte).

Sie können auch einen Mindestgrößenwert innerhalb des flex-Wertes angeben. Versuchen Sie, Ihre bestehenden article Regeln wie folgt zu aktualisieren:

<header>
  <h1>Sample flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Third article</h2>
    <p>Content…</p>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  zoom: 0.8;
  display: flex;
}

article {
  flex: 1 100px;
}

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

Dies bedeutet im Wesentlichen: "Jedes Flex-Element erhält zunächst 100px des verfügbaren Raums. Danach wird der restliche verfügbare Raum entsprechend den Proportionseinheiten aufgeteilt." Sie werden einen Unterschied sehen, wie der Raum aufgeteilt wird.

Alle Flex-Elemente haben eine Mindestbreite von 100 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 Proportionseinheiten auf. Eine Einheit wird jedem der ersten beiden Flex-Elemente zugewiesen und 2 Einheiten dem dritten Flex-Element, wodurch das dritte Flex-Element breiter ist als die anderen beiden, die die gleiche Breite haben.

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

flex: Shorthand versus Langform

flex ist eine Kurzform-Eigenschaft, mit der bis zu drei verschiedene Werte angegeben werden können:

• Der oben besprochene einheitslose Proportionswert. Dieser kann einzeln mit der Eigenschaft flex-grow in Langform angegeben werden.
• Ein zweiter einheitsloser Proportionswert, flex-shrink, der ins Spiel kommt, wenn die Flex-Elemente ihren Container überlaufen. Dieser Wert gibt an, wie stark ein Element schrumpfen wird, um ein Überlaufen zu verhindern. Dies ist eine ziemlich fortgeschrittene Flexbox-Funktion und wir werden sie in diesem Artikel nicht weiter behandeln.
• Der oben besprochene Mindestgrößenwert. Dieser kann einzeln mit dem Wert flex-basis in Langform angegeben werden.

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

Horizontale und vertikale Ausrichtung

Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Lassen Sie uns dies erkunden, indem wir uns ein neues Beispiel ansehen:

<div>
  <button>Smile</button>
  <button>Laugh</button>
  <button>Wink</button>
  <button>Shrug</button>
  <button>Blush</button>
</div>

body {
  font-family: sans-serif;
  width: 90%;
  max-width: 960px;
  margin: 10px auto;
}
div {
  height: 100px;
  border: 1px solid black;
}
button {
  font-size: 18px;
  line-height: 1.5;
  width: 15%;
}
/* Add your flexbox CSS below here */

Wir werden dies in eine saubere, flexible Schaltfläche/Toolbar verwandeln. Im Moment sehen Sie eine horizontale Menüleiste mit ein paar Schaltflächen, die in die obere linke Ecke gequetscht sind.

Nehmen Sie zuerst eine lokale Kopie dieses Beispiels.

Fügen Sie nun das Folgende am Ende des CSS des Beispiels hinzu:

<div>
  <button>Smile</button>
  <button>Laugh</button>
  <button>Wink</button>
  <button>Shrug</button>
  <button>Blush</button>
</div>

body {
  font-family: sans-serif;
  width: 90%;
  max-width: 960px;
  margin: 10px auto;
}
div {
  height: 100px;
  border: 1px solid black;
}
button {
  font-size: 18px;
  line-height: 1.5;
  width: 15%;
}
/* Add your flexbox CSS below here */

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 durch das Setzen der align-items-Eigenschaft auf center in der Mitte der Querachse positioniert. Die Flex-Elemente sind durch das Setzen der justify-content-Eigenschaft auf space-around gleichmäßig entlang der Hauptachse verteilt.

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

• Standardmäßig verhält sich der Wert normal wie stretch in Flexbox. Dies streckt alle Flex-Elemente, um das übergeordnete Element in der Richtung der Querachse auszufüllen. Wenn das übergeordnete Element in der 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 hatte unser erstes Beispiel standardmäßig gleich hohe Spalten.
• Der Wert center, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, aber entlang der Querachse zentriert sind. Deshalb sind die Schaltflächen in unserem derzeitigen Beispiel vertikal zentriert.
• Sie können auch Werte wie flex-start, self-start oder start und flex-end, self-end oder end verwenden, die alle Elemente am Anfang und Ende der Querachse ausrichten. Die baseline-Werte richten die Flex-Elemente nach ihrer Grundlinie aus. Im Wesentlichen wird die Unterseite der ersten Textzeile jedes Flex-Elements mit der Unterseite der Zeile des Elements mit dem größten Abstand zwischen Kreuzanfang und dieser Grundlinie ausgerichtet. Siehe align-items für alle Details.

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

<div>
  <button>Smile</button>
  <button>Laugh</button>
  <button>Wink</button>
  <button>Shrug</button>
  <button>Blush</button>
</div>

body {
  font-family: sans-serif;
  width: 90%;
  max-width: 960px;
  margin: 10px auto;
}
div {
  height: 100px;
  border: 1px solid black;
}
button {
  font-size: 18px;
  line-height: 1.5;
  width: 15%;
}
div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/* Add your flexbox CSS below here */

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

Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie es wieder, wenn Sie fertig sind.

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

• Der Standardwert ist normal, was sich wie start verhält, was alle Elemente anfangen lässt, an der Hauptachse zu sitzen.
• Sie können end oder flex-end verwenden, um sie am Ende sitzen zu lassen.
• Die Werte left und right verhalten sich wie start oder end je nach Schreibrichtungsmodus.
• center ist ebenfalls ein Wert für justify-content. Es wird die Flex-Elemente in die Mitte der Hauptachse setzen.
• Der Wert, den wir oben verwendet haben, space-around, ist nützlich — er verteilt alle Elemente gleichmäßig entlang der Hauptachse mit ein wenig Raum an jedem Ende.
• Es gibt einen weiteren Wert, space-between, der space-around sehr ähnlich ist, außer dass er keinen Raum an jedem Ende lässt.

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

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

Anordnung von Flex-Elementen

Flexbox hat auch eine Funktion, um die Anordnungsreihenfolge von Flex-Elementen zu ändern, ohne die Quellordnung zu beeinflussen. Dies ist eine weitere Sache, die mit traditionellen Layoutmethoden unmöglich zu tun ist.

Versuchen Sie, die folgende CSS zu Ihrem Button-Bar-Beispielcode hinzuzufügen:

button:first-child {
  order: 1;
}

Aktualisieren Sie die Seite und Sie werden sehen, dass der "Smile"-Button an das Ende der Hauptachse verschoben wurde. Sprechen wir darüber, wie das im Detail funktioniert:

• Standardmäßig haben alle Flex-Elemente einen order-Wert von 0.
• Flex-Elemente mit höheren angegebenen Ordnungswerten erscheinen später in der Anzeigereihenfolge als Elemente mit niedrigeren Ordnungswerten.
• Flex-Elemente mit dem gleichen Ordnungswert erscheinen in ihrer Quellreihenfolge. Wenn Sie vier Elemente haben, deren Ordnungswerte 2, 1, 1, und 0 sind, wäre ihre Anzeigereihenfolge 4., 2., 3., dann 1.
• Das dritte Element erscheint nach dem zweiten, weil es den gleichen Ordnungswert hat und nach ihm in der Quellreihenfolge steht.

Sie können negative Ordnungswerte festlegen, damit Elemente früher erscheinen als Elemente mit dem Wert 0. Zum Beispiel könnten Sie den "Blush"-Button mit der folgenden Regel an den Anfang der Hauptachse setzen:

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

Während Sie die Reihenfolge mit order ändern können, bleibt die Tabulatorreihenfolge dieselbe wie die Code-Reihenfolge. Das Ändern der Reihenfolge von fokussierbaren Elementen kann die Benutzerfreundlichkeit für Ihre Tastaturnutzer negativ beeinflussen!

Verschachtelte Flexboxen

Es ist möglich, einige ziemlich komplexe Layouts mit Flexbox zu erstellen. Es ist vollkommen in Ordnung, ein Flex-Element auch zu einem Flex-Container zu machen, sodass seine Kinder auch wie flexible Boxen angeordnet sind.

<header>
  <h1>Complex flexbox example</h1>
</header>
<section>
  <article>
    <h2>First article</h2>
    <p>Content…</p>
  </article>
  <article>
    <h2>Second article</h2>
    <p>Content…</p>
  </article>
  <article>
    <div>
      <button>Smile</button>
      <button>Laugh</button>
      <button>Wink</button>
      <button>Shrug</button>
      <button>Blush</button>
    </div>
    <div>
      <p>Paragraph one content…</p>
    </div>
    <div>
      <p>Paragraph two content…</p>
    </div>
  </article>
</section>

body {
  font-family: sans-serif;
  margin: 0;
}
header {
  background: purple;
  height: 100px;
}
h1 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}
article {
  padding: 10px;
  margin: 10px;
  background: aqua;
}
section {
  display: flex;
  zoom: 0.8;
}
article {
  flex: 1 170px;
}
article:nth-of-type(3) {
  flex: 3 170px;
  display: flex;
  flex-flow: column;
}
article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}
button {
  flex: 1 auto;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Dieses komplexe Layout hat einige Flex-Elemente, die auch Flex-Container sind. Der HTML-Code dafür ist ziemlich einfach. 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 legen wir fest, dass die Kinder des <section>-Elements als flexible Boxen angeordnet werden.

section {
  display: flex;
}

Als nächstes legen wir einige Flex-Werte auf den <article>-Elementen selbst fest. Beachten Sie besonders die zweite Regel hier: Wir legen fest, dass das dritte <article> seine Kinder ebenfalls als Flex-Elemente anordnet, diesmal jedoch als Spalte.

article {
  flex: 1 100px;
}

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

Als nächstes 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) ebenfalls so, dass sie wie Flex-Elemente angeordnet sind. Hier legen wir sie in einer Zeile mit Umbruch an und zentrieren sie im verfügbaren Raum, wie wir es mit dem individuellen Button-Beispiel zuvor 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;
}

Schließlich setzen wir einige Größenangaben für die Button. Diesmal geben wir ihm einen Flex-Wert von 1 auto. Dies hat einen sehr interessanten Effekt, den Sie sehen werden, wenn Sie die Breite Ihres Browserfensters ändern. Die Schaltflächen nehmen so viel Platz ein, wie sie können. So viele wie bequem auf eine Zeile passen, werden angeordnet; darüber hinaus fallen sie in eine neue Zeile.

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

Zusammenfassung

Das schließt unsere Einführung in die Grundlagen von Flexbox ab. Wir hoffen, Sie hatten Spaß und werden viel damit herumspielen, während Sie Ihr Lernen fortsetzen. Im nächsten Artikel werden wir Ihnen einige Tests geben, die Sie verwenden können, um zu prüfen, wie gut Sie all diese Informationen verstanden und behalten haben.

Siehe auch

• Grundkonzepte von Flexbox
• Ausrichten von Elementen in einem Flex-Container
• Anordnung von Flex-Elementen
• Steuerung 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 eine visuell ansprechende Weise erklärt
• Flexbox Froggy — ein Bildungsspiel, um die Grundlagen von Flexbox zu erlernen und besser zu verstehen

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