Der Flex-Container ist das Element, auf dem die Flexbox eingeschaltet wird. Er bestimmt Richtung und Verteilung seiner Kinder.
- Flex-Container
Element, auf dem display mit dem Wert flex gesetzt ist und dessen unmittelbare Kinder zu Flex-Items werden.
Beispiel: „Ein Flex-Container wirkt nur auf seine unmittelbaren Kinder.“
Was am Container eingestellt wird
.leiste {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}Richtung, Verteilung auf der Hauptachse, Ausrichtung auf der Querachse, ob umbrochen wird und wie groß der Abstand ist. Alles andere, etwa wie stark ein einzelnes Kind wächst, gehört ans Flex-Item.
Nur eine Ebene tief
Enkel sind keine Flex-Items. Wer eine zweite Ebene anordnen will, macht das Kind selbst zum Container. Das ist der häufigste Grund dafür, dass eine Ausrichtungsangabe scheinbar wirkungslos bleibt.