FlexLayout

[ Schnittstelle ]

interface FlexLayout {
    flexDirection?: 'Row' | 'Column' | Row-Reverse | Column-Reverse | null;
    flexWrap?: 'NoWrap' | 'Wrap' | 'Wrap-Reverse' | null;
    justifyContent?: 'Flex-Start' | 'Flex-End' | 'Center' | 'Space-Between' | 'Space-Around' | 'Space-Evenly' | null; "Baseline") */
    alignItems?: 'Flex-Start' | 'Flex-End' | 'Center' | 'Baseline' | 'Stretch' | null;
    alignContent?: 'Flex-Start' | 'Flex-End' | 'Center' | 'Space-Between' | 'Space-Around' | 'Stretch' | null;
    columnGap?: number | null;
    columnGapUnit?: DimensionUnit | null;
    rowGap?: number | null;
    rowGapUnit?: DimensionUnit | null;
    overflowX?: 'Visible' | 'Hidden' | 'Scroll' | 'Auto' | null;
    overflowY?: 'Visible' | 'Hidden' | 'Scroll' | 'Auto' | null;
}

Eigenschaften

Name

Typ

Beschreibung

flexDirection

'Row', 'Column', Row-Reverse, 'Column-Reverse', null, undefined

Definiert die Hauptachse des Flex-Containers und damit die grundlegende Anordnungsrichtung der enthaltenen Elemente.

MDN: flex-direction

flexWrap

'NoWrap', 'Wrap', 'Wrap-Reverse', null, undefined

Legt fest, ob die Flex-Elemente in einer einzigen Zeile bzw. Spalte bleiben oder bei Platzmangel auf mehrere Zeilen bzw. Spalten umgebrochen werden dürfen.

MDN: flex-wrap

justifyContent

'Flex-Start', 'Flex-End', 'Center', 'Space-Between', 'Space-Around', 'Space-Evenly', null, undefined

Definiert die Ausrichtung und Verteilung der Flex-Elemente entlang der Hauptachse.

MDN: justify-content

alignItems

'Flex-Start', 'Flex-End', 'Center', 'Baseline', 'Stretch', null, undefined

Definiert die Ausrichtung der Flex-Elemente entlang der Querachse, also senkrecht zur Hauptachse.

MDN: align-items

alignContent

'Flex-Start', 'Flex-End', 'Center', 'Space-Between', 'Space-Around', 'Stretch', null, undefined

Definiert die Ausrichtung und Verteilung mehrerer Flex-Zeilen oder Flex-Spalten entlang der Querachse. Diese Eigenschaft ist nur relevant, wenn durch flexWrap mehrere Zeilen oder Spalten entstehen.

MDN: align-content

columnGap

number, null, undefined

Legt den Abstand zwischen den Spalten fest.

MDN: column-gap

columnGapUnit

DimensionUnit, null, undefined

Gibt die Einheit an, in der der Abstand zwischen den Spalten angegeben wird, z. B. "px" oder "%".

rowGap

number, null, undefined

Legt den Abstand zwischen den Zeilen fest.

MDN: row-gap

rowGapUnit

DimensionUnit, null, undefined

Gibt die Einheit an, in der der Abstand zwischen den Zeilen angegeben wird, z. B. "px" oder "%".

overflowX

'Visible', 'Hidden', 'Scroll', 'Auto', null, undefined

Legt fest, wie sich Inhalte bei horizontalem Überlauf verhalten, z. B. sichtbar bleiben, abgeschnitten werden oder scrollbar sind.

MDN: overflow-x

overflowY

'Visible', 'Hidden', 'Scroll', 'Auto', null, undefined

Legt fest, wie sich Inhalte bei vertikalem Überlauf verhalten, z. B. sichtbar bleiben, abgeschnitten werden oder scrollbar sind.

MDN: overflow-y

FlexLayout 1:

Verfügbar ab Version 1.14.4.17