Flex-Container (Elternelement)

Eigenschaften, die am Elternelement eingestellt werden, gelten erstmal für alle Kindelemente. Einzelne Eigenschafften lassen sich jedoch später an den Kindelementen überlagern. Die Elternelement-Eigenschaften lassen sich über FlexLayout (API) einstellen.

FlexDirection:

Legt die Richtung der „Main Axis“ fest und bestimmt damit, in welcher Richtung und Reihenfolge Flex-Items im Container angeordnet werden.

FlexWrap:

Steuert, ob Flex-Items in einer einzigen Zeile bleiben oder auf mehrere Zeilen (bzw. Spalten bei flex-direction: column) umbrechen dürfen, wenn der verfügbare Platz im Container nicht ausreicht.

JustifyContent:

Verteilt Flex-Items entlang der „Main Axis“. Es steuert, wie der verbleibende freie Platz im Container verteilt wird — vor, zwischen und nach den Items.

AlignItems:

Richtet alle Flex-Items entlang der „Cross Axis“ aus. Während „justify-content“ die Verteilung entlang der „Main Axis“ steuert, bestimmt „align-items“ die Ausrichtung senkrecht dazu.

AlignContent:

Verteilt „mehrere Flex-Zeilen“ entlang der „Cross Axis“. Die Eigenschaft wird erst dann sichtbar, wenn ein Flex-Container durch „flex-wrap“ tatsächlich auf mehrere Zeilen oder Spalten umbrechen kann und entlang der Cross Axis freier Platz vorhanden ist.

ColumnGap:

Definiert den Abstand zwischen benachbarten Spalten bzw. Items in einem Flex-Layout. In typischen zeilenbasierten Flex-Containern (flex-direction: row) ist das der horizontale Abstand zwischen nebeneinanderliegenden Flex-Items.

RowGap:

Definiert den Abstand zwischen Flex-Zeilen. In einem klassischen Flexbox-Layout mit (flex-direction: row) ist das der vertikale Abstand zwischen umgebrochenen Reihen von Items.

OverflowX:

steuert, was passiert, wenn der Inhalt in horizontaler Richtung breiter ist als sein Container.

OverflowY:

steuert, was passiert, wenn der Inhalt in vertikaler Richtung höher ist als sein Container.