Flexbox-Layout
Flexbox (Flexible Box Layout) ist ein leistungsstarkes Layout-System in CSS, das für die Gestaltung von eindimensionalen Layouts optimiert ist. Es erleichtert die Verteilung von Elementen in einer Reihe oder Spalte und bietet flexible Möglichkeiten zur Ausrichtung, Grössenanpassung und Verteilung von Platz.
Grundlagen von Flexbox
Abschnitt betitelt „Grundlagen von Flexbox“Flexbox besteht aus zwei Hauptkomponenten:
- Flex-Container: Das übergeordnete Element, in dem Flexbox aktiviert wird
- Flex-Items: Die direkten Kindelemente des Flex-Containers
Erstellen eines Flex-Containers
Abschnitt betitelt „Erstellen eines Flex-Containers“Um Flexbox zu verwenden, setzen Sie die display-Eigenschaft des übergeordneten Elements auf flex oder inline-flex:
.container { display: flex; /* Erzeugt einen Block-Level-Flex-Container */}
.inline-container { display: inline-flex; /* Erzeugt einen Inline-Flex-Container */}Der Unterschied:
flexerstellt einen Block-Level-Container, der die gesamte verfügbare Breite einnimmtinline-flexerstellt einen Container, der nur so breit ist wie sein Inhalt, ähnlich wieinline-block
Flexbox-Richtung und Achsen
Abschnitt betitelt „Flexbox-Richtung und Achsen“Bei Flexbox gibt es zwei Achsen:
- Hauptachse (Main Axis): Die primäre Achse, entlang der die Flex-Items angeordnet werden
- Kreuzachse (Cross Axis): Die Achse senkrecht zur Hauptachse
Richtung der Hauptachse (flex-direction)
Abschnitt betitelt „Richtung der Hauptachse (flex-direction)“Die flex-direction-Eigenschaft legt die Richtung der Hauptachse fest:
.container { display: flex; flex-direction: row; /* Standardwert: von links nach rechts */}
.column { display: flex; flex-direction: column; /* Von oben nach unten */}
.row-reverse { display: flex; flex-direction: row-reverse; /* Von rechts nach links */}
.column-reverse { display: flex; flex-direction: column-reverse; /* Von unten nach oben */}Umbruch von Flex-Items (flex-wrap)
Abschnitt betitelt „Umbruch von Flex-Items (flex-wrap)“Standardmässig versuchen alle Flex-Items, in eine Zeile oder Spalte zu passen. Mit flex-wrap können Sie festlegen, ob Items bei Bedarf umbrechen sollen:
.no-wrap { display: flex; flex-wrap: nowrap; /* Standardwert: kein Umbruch */}
.wrap { display: flex; flex-wrap: wrap; /* Umbruch in neue Zeilen/Spalten */}
.wrap-reverse { display: flex; flex-wrap: wrap-reverse; /* Umbruch in umgekehrter Reihenfolge */}Kurzschreibweise: flex-flow
Abschnitt betitelt „Kurzschreibweise: flex-flow“flex-flow ist eine Kurzschreibweise für flex-direction und flex-wrap:
.container { display: flex; flex-flow: row wrap; /* Entspricht flex-direction: row; flex-wrap: wrap; */}Ausrichtung von Flex-Items
Abschnitt betitelt „Ausrichtung von Flex-Items“Flexbox bietet verschiedene Eigenschaften zur Ausrichtung von Items entlang der Haupt- und Kreuzachse.
Ausrichtung entlang der Hauptachse (justify-content)
Abschnitt betitelt „Ausrichtung entlang der Hauptachse (justify-content)“.container { display: flex; justify-content: flex-start; /* Standardwert: Items am Anfang der Hauptachse */}
.centered { display: flex; justify-content: center; /* Items in der Mitte der Hauptachse */}
.end { display: flex; justify-content: flex-end; /* Items am Ende der Hauptachse */}
.space-between { display: flex; justify-content: space-between; /* Gleichmässiger Abstand zwischen den Items, ohne Rand */}
.space-around { display: flex; justify-content: space-around; /* Gleichmässiger Abstand um die Items herum */}
.space-evenly { display: flex; justify-content: space-evenly; /* Gleichmässiger Abstand zwischen allen Items und Rändern */}Ausrichtung entlang der Kreuzachse (align-items)
Abschnitt betitelt „Ausrichtung entlang der Kreuzachse (align-items)“.container { display: flex; align-items: stretch; /* Standardwert: Items werden gedehnt, um den Container zu füllen */}
.start { display: flex; align-items: flex-start; /* Items am Anfang der Kreuzachse */}
.centered-cross { display: flex; align-items: center; /* Items in der Mitte der Kreuzachse */}
.end-cross { display: flex; align-items: flex-end; /* Items am Ende der Kreuzachse */}
.baseline { display: flex; align-items: baseline; /* Items werden an ihrer Textgrundlinie ausgerichtet */}Ausrichtung einzelner Flex-Items (align-self)
Abschnitt betitelt „Ausrichtung einzelner Flex-Items (align-self)“Sie können die Ausrichtung einzelner Flex-Items unabhängig von den anderen überschreiben:
.container { display: flex; align-items: center; /* Standardausrichtung für alle Items */}
.item { align-self: flex-start; /* Dieses Item wird oben ausgerichtet */}
.another-item { align-self: flex-end; /* Dieses Item wird unten ausgerichtet */}Ausrichtung mehrzeiliger Flex-Container (align-content)
Abschnitt betitelt „Ausrichtung mehrzeiliger Flex-Container (align-content)“Wenn flex-wrap: wrap gesetzt ist und mehrere Zeilen entstehen, können Sie mit align-content steuern, wie diese Zeilen verteilt werden:
.multi-line { display: flex; flex-wrap: wrap; height: 400px; /* Container-Höhe */ align-content: flex-start; /* Zeilen am Anfang der Kreuzachse */}
.centered-lines { display: flex; flex-wrap: wrap; height: 400px; align-content: center; /* Zeilen in der Mitte der Kreuzachse */}
.space-between-lines { display: flex; flex-wrap: wrap; height: 400px; align-content: space-between; /* Gleichmässiger Abstand zwischen den Zeilen */}Flex-Items: Grösse und Flexibilität
Abschnitt betitelt „Flex-Items: Grösse und Flexibilität“Flexbox bietet leistungsstarke Möglichkeiten zur Steuerung der Grösse und Flexibilität von Items.
Grundlegende Eigenschaften für Flex-Items
Abschnitt betitelt „Grundlegende Eigenschaften für Flex-Items“flex-grow
Abschnitt betitelt „flex-grow“Die flex-grow-Eigenschaft bestimmt, wie viel vom verfügbaren Platz ein Item im Verhältnis zu den anderen Items einnehmen soll:
.item { flex-grow: 0; /* Standardwert: Item wächst nicht */}
.growing-item { flex-grow: 1; /* Item nimmt verfügbaren Platz ein */}
.double-growing-item { flex-grow: 2; /* Item nimmt doppelt so viel Platz ein wie ein Item mit flex-grow: 1 */}flex-shrink
Abschnitt betitelt „flex-shrink“Die flex-shrink-Eigenschaft bestimmt, wie stark ein Item schrumpfen kann, wenn nicht genug Platz vorhanden ist:
.item { flex-shrink: 1; /* Standardwert: Item kann schrumpfen */}
.non-shrinking { flex-shrink: 0; /* Item schrumpft nicht (behält seine Grösse) */}
.double-shrinking { flex-shrink: 2; /* Item schrumpft doppelt so stark wie standard Items */}flex-basis
Abschnitt betitelt „flex-basis“Die flex-basis-Eigenschaft definiert die Ausgangsgrösse eines Flex-Items, bevor verfügbarer Platz verteilt wird:
.item { flex-basis: auto; /* Standardwert: Basiert auf der Content-Grösse */}
.specific-width { flex-basis: 200px; /* Item startet mit 200px Breite (bei row) oder Höhe (bei column) */}
.percentage-width { flex-basis: 50%; /* Item startet mit 50% der Container-Grösse */}Kurzschreibweise: flex
Abschnitt betitelt „Kurzschreibweise: flex“Die flex-Eigenschaft ist eine Kurzschreibweise für flex-grow, flex-shrink und flex-basis:
.item { flex: 0 1 auto; /* Standardwert: flex-grow: 0, flex-shrink: 1, flex-basis: auto */}
.growing { flex: 1; /* Entspricht flex: 1 1 0%; Item wächst und schrumpft */}
.fixed-width { flex: 0 0 200px; /* Item wächst nicht, schrumpft nicht, hat 200px Basis-Breite */}
.flexible { flex: 1 1 300px; /* Item startet mit 300px, kann aber wachsen und schrumpfen */}Übliche flex-Werte und ihre Bedeutung
Abschnitt betitelt „Übliche flex-Werte und ihre Bedeutung“flex: 1– Das Item kann wachsen und schrumpfen, ignoriert seine Ausgangsgrösseflex: 0 0 auto– Das Item behält seine natürliche Grösse und ändert sich nichtflex: 0 0 200px– Das Item ist genau 200px breit und ändert sich nichtflex: 1 1 0%– Das Item ist vollständig flexibel, basierend auf verfügbarem Platz
Reihenfolge von Flex-Items
Abschnitt betitelt „Reihenfolge von Flex-Items“Die order-Eigenschaft ermöglicht es, die visuelle Reihenfolge von Flex-Items unabhängig von ihrer Reihenfolge im HTML zu ändern:
.first { order: -1; /* Erscheint vor Items mit höheren order-Werten */}
.item { order: 0; /* Standardwert */}
.last { order: 1; /* Erscheint nach Items mit niedrigeren order-Werten */}Alle Items mit dem gleichen order-Wert werden in ihrer ursprünglichen Reihenfolge angezeigt.
Praktische Anwendungsbeispiele für Flexbox
Abschnitt betitelt „Praktische Anwendungsbeispiele für Flexbox“Zentrieren eines Elements horizontal und vertikal
Abschnitt betitelt „Zentrieren eines Elements horizontal und vertikal“.center-container { display: flex; justify-content: center; /* Horizontal zentrieren */ align-items: center; /* Vertikal zentrieren */ height: 100vh; /* Volle Viewport-Höhe */}Navigationsleiste
Abschnitt betitelt „Navigationsleiste“.navbar { display: flex; justify-content: space-between; /* Logo links, Menü rechts */ align-items: center; padding: 1rem; background-color: #333; color: white;}
.logo { /* Keine speziellen Flex-Eigenschaften nötig */}
.menu { display: flex; gap: 1rem; /* Abstand zwischen Menüpunkten */}Karten mit gleicher Höhe
Abschnitt betitelt „Karten mit gleicher Höhe“.card-container { display: flex; flex-wrap: wrap; gap: 20px;}
.card { flex: 1 1 300px; /* Basis: 300px, kann wachsen und schrumpfen */ display: flex; flex-direction: column; padding: 20px; border: 1px solid #ddd; border-radius: 8px;}
.card-header { /* Überschrift */}
.card-body { flex-grow: 1; /* Sorgt dafür, dass alle Karten die gleiche Höhe haben */}
.card-footer { margin-top: auto; /* Drückt den Footer nach unten */}Flexbox vs. andere Layoutmethoden
Abschnitt betitelt „Flexbox vs. andere Layoutmethoden“Vorteile von Flexbox
Abschnitt betitelt „Vorteile von Flexbox“- Einfache vertikale Zentrierung: Anders als bei älteren Methoden ist die vertikale Zentrierung mit Flexbox trivial
- Dynamische Grössenanpassung: Elemente können proportional wachsen und schrumpfen
- Reihenfolgeänderung: Die visuelle Reihenfolge kann unabhängig von der HTML-Struktur geändert werden
- Ausrichtungskontrolle: Präzise Kontrolle über die Ausrichtung in beiden Dimensionen
- Platzverteilung: Einfache Verteilung von Platz zwischen und um Elemente
Wann Flexbox verwenden?
Abschnitt betitelt „Wann Flexbox verwenden?“Flexbox eignet sich besonders gut für:
- Eindimensionale Layouts: Zeilen oder Spalten von Elementen
- Komponenten-Layouts: Navigation, Karten, Formulare
- Vertikale Zentrierung: Elemente innerhalb eines Containers zentrieren
- Variable Breiten: Wenn Elemente proportional wachsen/schrumpfen sollen
- Ungleiche Grössen: Wenn Elemente unterschiedliche Grössen haben, aber Ausrichtung wichtig ist
Grenzen von Flexbox
Abschnitt betitelt „Grenzen von Flexbox“Für komplexe zweidimensionale Layouts (Raster/Gitter) ist CSS Grid oft besser geeignet. In manchen Fällen ist eine Kombination aus beiden am effektivsten.
Übung: Flexbox Navigation und Card Layout
Abschnitt betitelt „Übung: Flexbox Navigation und Card Layout“Im nächsten Kapitel werden wir uns mit CSS Grid beschäftigen, einem leistungsstarken Layout-System für zweidimensionale Layouts, das Flexbox ideal ergänzt.