FlexLayout

[ Interface ]

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;
}

Properties

Name

Type

Description

flexDirection

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

Defines the main axis of the flex container and thus the basic arrangement direction of the elements it contains.

MDN: flex-direction

flexWrap

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

Determines whether the flex elements remain in a single row or column or can be wrapped across several rows or columns if there is a lack of space.

MDN: flex-wrap

justifyContent

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

Defines the alignment and distribution of the flex elements along the main axis.

MDN: justify-content

alignItems

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

Defines the alignment of the flex elements along the transverse axis, i.e. perpendicular to the main axis.

MDN: align-items

alignContent

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

Defines the alignment and distribution of multiple flex rows or flex columns along the transverse axis. This property is only relevant if flexWrap creates multiple rows or columns.

MDN: align-content

columnGap

number, null, undefined

Sets the space between columns.

MDN: column-gap

columnGapUnit

DimensionUnit, null, undefined

Specifies the unit in which the distance between the columns is specified, e.g. "px" or "%".

rowGap

number, null, undefined

Sets the space between rows.

MDN: row-gap

rowGapUnit

DimensionUnit, null, undefined

Specifies the unit in which the spacing between the lines is specified, e.g. "px" or "%".

overflowX

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

Defines how content behaves in the event of horizontal overflow, e.g. remains visible, is cut off or is scrollable.

MDN: overflow-x

overflowY

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

Defines how content behaves in the event of vertical overflow, e.g. remains visible, is cut off or is scrollable.

MDN: overflow-y

FlexLayout 1:

Available since version 1.14.4.17