Den Flex-Container Verstehen
Wenn Sie display: flex auf ein Element setzen, wird es zu einem Flex-Container und seine direkten Kinder werden zu Flex-Items. Der Container steuert die Hauptachse (bestimmt durch flex-direction) und die Querachse (senkrecht zur Hauptachse). Alle Abstands- und Ausrichtungseigenschaften wirken entlang dieser beiden Achsen.
Hauptachsen-Ausrichtung mit justify-content
justify-content verteilt Items entlang der Hauptachse. flex-start packt Items an den Anfang; flex-end ans Ende; center gruppiert sie in der Mitte. space-between setzt gleichen Abstand zwischen Items; space-around fugt gleichen Abstand um jedes Item hinzu; space-evenly verteilt identische Lucken zwischen und um Items.
Querachsen-Ausrichtung mit align-items
align-items positioniert Items entlang der Querachse. stretch fullt die gesamte Querdimension; flex-start richtet am Startrand aus; flex-end am Endrand; center platziert Items in der Mitte; baseline richtet Items an ihren Text-Grundlinien aus, was nutzlich ist, wenn Items verschiedene Schriftgrossen haben.
Flex-Item-Dimensionierung: grow, shrink, basis
flex-grow steuert, wie Items sich ausdehnen, um zusatzlichen Platz zu fullen. flex-shrink steuert, wie Items sich zusammenziehen, wenn Platz knapp ist. flex-basis legt die Anfangsgrosse vor dem Wachsen oder Schrumpfen fest. Die Kurzschreibweise flex: 1 1 0 bedeutet gleichmassig wachsen, gleichmassig schrumpfen, ausgehend von Null.
