EFlex Flex

import EUI 1.0

Examples

Direction and gap

QML sourceQML

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Main axis distribution

QML sourceQML

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Wrapping

QML sourceQML

import EUI 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

EFlex {
    width: 420
    wrap: true
    height: 200
    gap: [12, 16]
    align: "start"

ERectangle {
        radius: 6
        width: 92
        height: 32
        opacity: 1
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 48
        opacity: 0.75
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 64
        opacity: 0.5
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 32
        opacity: 1
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 48
        opacity: 0.75
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
    ERectangle {
        radius: 6
        width: 92
        height: 64
        opacity: 0.5
        color: EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)
    }
}

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Vertical and reverse

QML sourceQML

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Growth and constraints

QML sourceQML

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

alignstring

Alignment of items along the cross axis.

"start" / "center"
"end" / "stretch"

Default"stretch"

alignContentstring

Distribution of wrapped lines along the cross axis.

"start" / "center"
"end" / "stretch"
"space-between" / "space-around"
"space-evenly"

Default"start"

contentalias

Default content slot; aliases button text in EFloatButton.

Defaultbody.data

contentChildrenaliasRead only

Visual children managed by this layout.

Defaultbody.children

gapvar

Horizontal and vertical spacing between items.

Number or [horizontal gap, vertical gap]

Default12

horizontalboolRead only

Whether the main axis is horizontal.

DefaultComputed

horizontalGaprealRead only

Validated horizontal gap.

DefaultComputed

insetrealRead only

Validated container inset.

DefaultComputed

justifystring

Distribution of items along the main axis.

"start" / "end"
"center" / "space-between"
"space-around" / "space-evenly"

Default"start"

layoutvarRead only

Computed item positions and sizes.

DefaultComputed

naturalCrossrealRead only

Natural content size along the cross axis.

DefaultComputed

naturalMainrealRead only

Natural content size along the main axis.

DefaultComputed

orientationstring

Direction of the flex layout.

horizontal
vertical

Default"horizontal"

paddingreal

Container padding in pixels.

Default0

reversebool

Reverse the main-axis layout direction.

Defaultfalse

verticalGaprealRead only

Validated vertical gap.

DefaultComputed

wrapbool

Wrap items when main-axis space is insufficient.

Defaultfalse

EFlex Flex ​

Examples ​

Direction and gap ​

Main axis distribution ​

Wrapping ​

Vertical and reverse ​

Growth and constraints ​

Properties ​

EFlex Flex

Examples

Direction and gap

Main axis distribution

Wrapping

Vertical and reverse

Growth and constraints

Properties