- Was ist der Unterschied zwischen justify-content und align-items?
- justify-content positioniert die Elemente entlang der Hauptachse (die Richtung, die flex-direction festlegt — row = horizontal, column = vertikal). align-items positioniert sie entlang der Querachse (senkrecht zur Hauptachse). Bei flex-direction: row verschiebt justify-content die Elemente links-rechts und align-items oben-unten. Bei column ist es umgekehrt. Die beiden überschneiden sich nie — jede wirkt nur auf ihrer eigenen Achse.
- Warum bewirkt align-content nichts?
- align-content greift nur, wenn Elemente auf mehrere Zeilen umbrechen. Steht flex-wrap auf nowrap (Standard), bleiben alle Elemente in einer Zeile und align-content hat nichts auszurichten. Stell flex-wrap auf wrap, füg genug Elemente hinzu, dass sie in eine zweite Zeile rutschen, und schon steuert align-content, wie die Zeilen auf der Querachse verteilt werden.
- Was macht flex-direction: row-reverse eigentlich?
- Es kehrt die Reihenfolge um, in der die Elemente entlang der Hauptachse platziert werden, ohne die Reihenfolge im HTML zu ändern. Bei row-reverse steht Element 1 rechts, Element 2 links daneben und so weiter. justify-content: flex-start meint jetzt den rechten Rand statt den linken. Dasselbe gilt für column-reverse — die Elemente stapeln sich von unten nach oben. Praktisch für RTL-Layouts oder visuelles Umsortieren, ohne das DOM zu ändern (Tab-Reihenfolge und Screenreader-Reihenfolge bleiben intakt).
- Soll ich gap nehmen, margin oder beides?
- Nimm gap. Es setzt nur Abstand zwischen die Elemente, nicht an die Außenkanten, und funktioniert in beide Richtungen (row-gap, column-gap), sobald du auf wrap umstellst. Margin an den Kindern ist der alte Workaround — es setzt Abstand an jeder Seite, auch außen, und du musst mit negativem Margin am Elternelement dagegenhalten. gap wird von jedem Browser unterstützt, der nach April 2021 erschienen ist — also von allem, was heute im Einsatz ist.
- Wie unterscheidet sich Flexbox von CSS Grid?
- Flexbox ist eindimensional — du ordnest Elemente in einer Zeile oder einer Spalte an. Grid ist zweidimensional — du legst Zeilen und Spalten fest und platzierst Elemente in Zellen. Faustregel: Navigationsleisten, Button-Reihen, vertikale Stapel, Sidebar + Inhalt und alles, wo die Elemente ihre Größe selbst bestimmen = Flexbox. Fotogalerien, Dashboards, Magazin-Layouts, alles mit benannten Spuren = Grid. Beides lässt sich kombinieren: Eine Grid-Zelle kann ein Flex-Container sein.
- Warum wächst ein Element und die anderen nicht?
- Bei diesem Kind ist flex-grow auf eine positive Zahl gesetzt. flex-grow sagt einem Element, wie viel vom übrigen Platz es sich nehmen soll — 0 heißt „nicht wachsen“, 1 heißt „einen gleichen Anteil nehmen“, 2 heißt „doppelt so viel wie die 1er“. Dieser Generator konzentriert sich auf die Container-Eigenschaften; flex-grow / flex-shrink / flex-basis gehören zu den Kindern, und die setzt du pro Element in deinem eigenen CSS.
- Funktioniert dieses CSS in älteren Browsern?
- In allem Modernen: ja. Flexbox wird seit 2017 überall unterstützt (Chrome, Firefox, Safari, Edge, mobil). Die einzige neuere Ergänzung ist die gap-Eigenschaft in Flex-Containern — voll unterstützt seit April 2021. Wenn du IE 11 oder einen mobilen Browser von 2020 bedienen musst, ersetz gap durch margin an den Kindern und verzichte auf space-evenly (space-around kommt dem nahe).
- Warum schrumpfen meine Elemente nicht unter ihre Inhaltsgröße?
- Jedes Flex-Element hat implizit min-width: auto, also die Größe seines Inhalts (das längste Wort in einem Absatz, die natürliche Breite eines Bildes). Das hebelt flex-shrink aus. Setz min-width: 0 am Kind, damit flex-shrink es wirklich unter seine Inhaltsgröße schrumpfen lassen kann. Das ist die häufigste Flexbox-Überraschung — und die Lösung ist ein Einzeiler.
