Flex - Align Items (CSS)

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

Align in Flex Container

Flex Container haben ja immer eine Hauptrichtung - nämlich row oder col. Defaultmäßig gehen Sie in Zeilenrichtung (row).

In der Hauptrichtung macht man das Align mit justify-content. Sprich bei Row in der Horizontalen. In der Querrichtung richtet man mit align-items aus.

Wenn man mit flex-direction:row die Richtung des Containers ändert vertauschen sich die Achsen, sprich die vertikale wird zur horizontalen ausrichtung.

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-Container verhalten.

Cross Axis - align-items

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