Flex - Align Items (CSS)

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Hier geht es darum wie man Flex-Boxen in einem Flex-Container ausrichten kann. Flex Container haben ja immer eine Hauptrichtung - nämlich row oder col. Defaultmäßig gehen Sie in Zeilenrichtung (row).

Align in Flex Container und flex-direction

Im Flex-Container kann man vorgeben, wie sich die Flex-Boxen verteilen sollen. Je nachdem ob man flex-direction: row oder flex-direction: column; gewählt hat. Verteilt Flex die Boxen waagerecht oder senkrecht.

Flexboxen verteilen mit justify-content

Mit justify-content verteilt man die Boxen in der Hauptrichtung. In der Querrichtung versucht Flex standardmäßig den ganzen Raum auszunutzen (alle Boxen sind also erstmal gleich hoch. In der Querrichtung richtet man mit align-items aus (siehe unten).

Main Axis - justify-content

justify-content: flex-start -> Boxen
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenly (not defined in the Flexbox specification)

Umbruch

Standardmäßig versucht Flex alle Boxen in eine Reihe zu quetschen

Cross Axis - align-items

align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

Außerdem gibt es noch align-self und align-content. Mit align-self kann man das Ausrichten direkt auf das Item anwenden.

Mit align-content steuert man, wie sich aufeinanderfolgende Flex-Items die in neue Zeilen umbrechen verhalten (oder in neue Spalten bei flex-direction:col).

Flex-Item-Distribution

The align-content property takes the following values:

align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly (not defined in the Flexbox specification)