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).

Ausrichten von Flex-Boxen im Flex-Container

Flex Container haben immer eine Hauptrichtung - nämlich row oder col. Sobald ein Elternelement die Eigenschaft display: flex; bekommt, werden alle direkten Kindelemente zu flex-items. Defaultmäßig verteilen Sie sich in Zeilenrichtung (row). Wenn man mit flex-direction:column die Richtung des Containers ändert vertauschen sich die Achsen, sprich der Container möchte jetzt die Flex-Boxen in der vertikalen Ausrichten.

In vielen Fällen kann man die Ausrichtung der Boxen schon im Container regeln. Dazu gibt es die Befehle justify-content und align-items.

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. Bei flex-direction: row; sind also erstmal alle Boxen gleich hoch, auch wenn eine mehr Inhalt enthält. Bei flex-direction: column nehmen die Items die ganze Breite ein, wenn man keine Breite explizit vergibt.

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: space-evenly (not defined in the Flexbox specification)

Zeilenumbruch

Standardmäßig versucht Flex alle Items in eine Reihe (oder Spalte) zu quetschen. Bei Spalten kann der Container in der Regel wachsen. In Reihen möchte man oft einen Umbruch. Den bekommt man mit.

flex-wrap: wrap;
flex-wrap: no-wrap; -> Standard

Cross Axis - align-items

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

Eigenschaften für Flex-Items align-content / align-self

Es gibt auch Möglichkeiten die Flex-Items direkt zu beeinflussen. Dafür gibt es 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)