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:column 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-Items die in neue Zeilen umbrechen verhalten (oder in neue Spalten bei flex-direction:col).

Main Axis - justify-content

justify-content: flex-start
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)

Cross Axis - align-items

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

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)