EMZETT.Flexbox ordnet Elemente in einer Reihe oder Spalte an, verteilt den Platz und richtet sie aus. Es ist das Werkzeug für Menüs, Kartenreihen, Zentrierung und alles Eindimensionale.
Du setzt display: flex auf den Container. Seine direkten Kinder werden zu Flex-Elementen.
Ergebnis
Hauptachse und Querachse
Alles in Flexbox dreht sich um zwei Achsen:
- Hauptachse: Richtung von
flex-direction(Standard:row, von links nach rechts) - Querachse: senkrecht dazu
| Eigenschaft (Container) | Werte | Wirkung |
|---|---|---|
flex-direction | row, row-reverse, column, column-reverse | Richtung der Hauptachse |
justify-content | flex-start, center, flex-end, space-between, space-around, space-evenly | Verteilung entlang der Hauptachse |
align-items | stretch, flex-start, center, flex-end, baseline | Ausrichtung entlang der Querachse |
flex-wrap | nowrap, wrap | Umbruch in mehrere Zeilen |
gap | 10px, 10px 20px | Abstand zwischen den Elementen |
align-content | wie justify-content | Verteilung mehrerer Zeilen |
Ergebnis
Perfekt zentrieren
Eines der berühmtesten Probleme, in drei Zeilen gelöst:
Ergebnis
Kürzer mit Grid: display: grid; place-items: center;.
Elemente flexibel machen
Die Eigenschaften der Kinder bestimmen, wie sie den Platz teilen:
| Eigenschaft | Bedeutung |
|---|---|
flex-grow | Wachstumsanteil bei freiem Platz (0 = nicht wachsen) |
flex-shrink | Schrumpfanteil bei Platzmangel |
flex-basis | Ausgangsgröße (auto, 200px, 30%) |
flex | Kurzform grow shrink basis: flex: 1 = 1 1 0 |
align-self | eigene Querachsen-Ausrichtung |
order | Reihenfolge (nur visuell; Tastaturreihenfolge bleibt!) |
Ergebnis
Umbruch: flex-wrap
Ohne wrap quetscht Flexbox alles in eine Zeile. Mit wrap brechen Elemente um. Mit flex: 1 1 200px entsteht ein flexibles Raster ohne Media Queries:
Ergebnis
Ändere die Fensterbreite: Die Karten ordnen sich automatisch neu an.
Typische Muster
Navigationsleiste
Ergebnis
margin-right: auto auf einem Flex-Element schiebt alle folgenden an den rechten Rand.
Seitenfuß am unteren Rand
Ergebnis
Karte mit Fußzeile unten
Ergebnis
Flexbox oder Grid?
- Flexbox: eindimensional (eine Reihe oder Spalte), Inhalt bestimmt die Größe: Menüs, Buttonreihen, Zentrierung
- Grid: zweidimensional (Zeilen und Spalten), Layout bestimmt die Größe: Seitenraster, Galerien
Beides lässt sich kombinieren.
Merke
display: flexam Container;flex-directionlegt die Hauptachse festjustify-contentverteilt entlang der Hauptachse,align-itemsrichtet quer ausgapfür Abstände,flex-wrap: wrapfür Umbrücheflex: 1macht Kinder gleich breit,flex: 0 0 120pxfestmargin-left: autoschiebt Elemente nach rechts- Mit
display: flex; justify-content: center; align-items: centerzentrierst du alles
Aufgabe
Baue eine Kopfzeile mit Logo links und Menü rechts, darunter eine Reihe aus drei gleich breiten Karten, die auf dem Handy untereinander umbrechen.