Web-Programmierung3 - CSS Teil 2Layout (FlexBox)

Layout mit Flexbox

💡

Dauer: 45 Minuten

Thema: Flexbox: Ausrichtung und Anordnung

Ziel: Seitenlayouts mit Flexbox gestalten

Mit dem sogenannten Flexbox-Layout kann für verschiedene Display-Größen (Laptop, Smartphone, usw.) eine automatisch passende Anordnung der HTML-Elemente erreicht werden.

Das Flexbox-Layout wird in einem HTML-Element mit dieser Eigenschaft aktiviert:

display: flex;

Dies geschieht oft im einem div-Element, welches andere Elemente enthält und somit als „Container“-Element aufgefasst werden kann.

👨🏻‍💻

Interaktive Beispiele und Erläuterungen auf ProgContent

⟶ Zusammen ein Beispiel mit drei unterschiedlich gefärbten Boxen auf Codepen entwickeln.

Hauptachse mit flex-direction bestimmen

Die Anordnung der Elemente innerhalb des Flexbox-Layouts orientiert sich an der Ausrichtung der sogenannten Hauptachse. Diese verläuft standardmäßig horizontal von links nach rechts (row steht für Zeile).

Die CSS-Eigenschaft flex-direction legt also in einer Flexbox durch den Wert row den Verlauf der Hauptachse von links nach rechts (zeilenartig). Mit dem Wert column (d.h. mit flex-direction: column; wird ein vertikales Layout von oben nach unten bestimmt (column steht für Spalte).

Verlauf der Haupt- und Querachse mit flex-direction, justify-content und align-items am Whiteboard darstellen.

Anordnung mit justify-content und align-items

Mit den Eigenschaften justify-content und align-items kann die konkrete Anordnung der Elemente bestimmt werden für

  • die Hauptachse (justify-content) und
  • die Querachse (align-item)

Zentriert werden Elemente jeweils mit dem Wert center.

Weitere mögliche, relevante Werte:

  • Hauptachse: justify-content: center | space-between | space-around | space-evenly | flex-start | flex-end | … Querachse: align-items: center | flex-start | flex-end | …

Die verschiedenen Werte können z.B. direkt hier im Browser ausprobiert werden: flexbox.tech.

Umbrüche mit flex-wrap

Mit flex-wrap kann ein automatischer Umbruch der enthaltenen Elemente auf die nächste Zeile bzw. Spalte erreicht werden:

flex-wrap: wrap;

Abstände mit gap

Mit der Eigenschaft gap kann ein Abstand zwischen den Elementen innerhalb des Flexbox-Layouts festgelegt werden:

gap: 10px;

Mit gap werden Abstände sowohl auf der Haupt- als auch auf der Querachse erstellt. column-gap und row-gap sind die entsprechenden Eigenschaften, die Abstände auf die Haupt- und Querachse beschränken.

Weiteres zu Flexbox

Wir haben oben die wichtigsten Eigenschaften des Flexbox-Layouts besprochen:

  • Aktivierung mit display: flex;
  • Ausrichtung der Hauptachse mit flex-direction: …;
  • Anordnung auf der Hauptachse mit justify-content: …;
  • Anordnung auf der Querachse mit align-items: …;
  • Umbrüche mit flex-wrap: wrap;
  • Abstände mit gap (bzw. column-gap und row-gap)

Mehr zu Flexbox im Mozilla Developer Network (MDN) hier und hier.

Empfehlenswert ist dieses interaktive Tutorial zu Flexbox.

Weiterentwicklung der Beispiel-App

👨🏻‍💻

Live Coding
Flexbox-Layout in der Web-App umsetzen:

  • „Wetter-Kacheln“ in horizontaler Flexbox mit Abständen und Zeilenumbruch
  • Flexbox innerhalb der Kachel um Elemente passend anzuordnen (Abstand zwischen Text und Icon, usw.)
Das Box-ModellÜbung (FlexBox)