Modul 06
Flexbox
Flexbox
offizieller Name der Spezifikation: "Flexible Box Layout Module"
- Flexibel
- Elemente können wachsen, schrumpfen oder sich neu verteilen, je nachdem wie viel Platz im Container gerade verfügbar ist.
- Eindimensional
- Flexbox ordnet Elemente entlang einer einzigen Achse an – entweder als Zeile oder als Spalte, nicht beides gleichzeitig.
Kurz gesagt: Flexbox eignet sich besonders für die Anordnung in einer Reihe oder Spalte – etwa Navigationsleisten, Button-Gruppen oder Karten, die sich gleichmäßig verteilen sollen.
Werkstatt-Regler
Die Hauptachse
flex-direction legt fest, ob die Hauptachse horizontal (row) oder vertikal (column) verläuft. justify-content wirkt immer entlang dieser Achse.
Die Kreuzachse
align-items wirkt entlang der Kreuzachse, senkrecht zur Hauptachse. Stretch ist der Standard und füllt die verfügbare Höhe.
Gap statt Margin
gap erzeugt Abstand zwischen Flex-Elementen, ohne dass Ränder mit Nachbarelementen kollidieren – sauberer als Margin-Tricks.