FlexboxLayout QML Type

The FlexboxLayout QML construct provides a flex layout for the quick items. More...

Import Statement:	`import QtQuick.Layouts`
Since:	Qt 6.10
Inherits:	Item
Status:	Preliminary

This type is under development and is subject to change.

List of all members, including inherited members

Properties

alignContent : enumeration
alignItems : enumeration
columnGap : real
direction : enumeration
gap : real
justifyContent : enumeration
rowGap : real
wrap : enumeration

Attached Properties

alignSelf : enumeration

Detailed Description

The FlexboxLayout enables to layout the quick items in a flexible way as similar to that of CSS Flexible Box Layout. Internally Qt FlexboxLayout uses the yoga engine to derive the geometry of the flex items. The yoga library is a subset of the CSS Flexible Box Layout. Thus FlexboxLayout can be limited to the feature as supported in the yoga library.

Note: The FlexboxLayout adheres to yoga library version 2.0 for its features.

The items within the FlexboxLayout can be configured with preferred, minimum and maximum sizes through the existing layout attached properties. For instance, if the item within the FlexboxLayout need to be stretched, the layout attached property Layout.fillWidth or Layout.fillHeight can be set.

Items in a FlexboxLayout support these attached properties:

Read more about attached properties here.

To be able to use this type more efficiently, it is recommended that you understand the general mechanism of the Qt Quick Layouts module. Refer to Qt Quick Layouts Overview for more information.

Example Usage

The following snippet shows the minimalistic example of using QML FlexboxLayout to arrange the rectangle items in more flexible way

FlexboxLayout {
    id: flexLayout
    anchors.fill: parent
    wrap: FlexboxLayout.Wrap
    direction: FlexboxLayout.Row
    justifyContent: FlexboxLayout.JustifySpaceAround
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'olive'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'beige'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'darkseagreen'
        implicitWidth: 200
        implicitHeight: 200
    }
}

Note: This API is considered tech preview and may change or be removed in future versions of Qt.

Property Documentation

alignContent : enumeration

This property specifies the distribution of the flex lines along the cross-axis of the flex box layout.

Possible values:

Constant	Description
`FlexboxLayout.AlignStart`	(default) Flex lines are aligned to the start of the flex box layout.
`FlexboxLayout.AlignCenter`	Flex lines are aligned along the center of the flex box layout.
`FlexboxLayout.AlignEnd`	Flex lines are aligned to the end of the flex box layout.
`FlexboxLayout.AlignStretch`	Flex lines are stretched according to the height of the flex box layout.
`FlexboxLayout.AlignSpaceBetween`	The spaces are evenly distributed between the lines and no space along the edge of the flex box layout.
`FlexboxLayout.AlignSpaceAround`	The spaces are evenly distributed between the lines and half-size space on the edges of the flex box layout.
`FlexboxLayout.AlignSpaceEvenly`	The spaces are evenly distributed between the lines and the edges of the flex box layout. Not supported in Qt 6.10.

The default value is FlexboxLayout.AlignStart.

alignItems : enumeration

This property specifies the alignment of the items within the flex lines of the flex box layout and its aligned along the cross-axis (which is orthogonal to the main-axis, as defined by the property direction). This property can be overridden by the items within the flex box layout through the attached property FlexboxLayout.alignSelf.

Possible values:

Constant	Description
`FlexboxLayout.AlignStart`	(default) Items are aligned to the start of the flex box layout cross-axis.
`FlexboxLayout.AlignCenter`	Items are aligned along the center of the flex box layout cross-axis.
`FlexboxLayout.AlignEnd`	Items are aligned to the end of the flex box layout cross-axis.

Note: The alignments mentioned in possible values are only applicable for the alignItems property

The default value is FlexboxLayout.AlignStart.

columnGap : real

This property holds the amount of space that need to be applied to the FlexboxLayout along the inline axis. Setting this property override the gap value affecting the inline axis.

The default value is 0.

direction : enumeration

This property holds the item layout direction within the flex box layout and it defines the main-axis.

Possible values:

Constant	Description
`FlexboxLayout.Row`	(default) Items are laid out from left to right.
`FlexboxLayout.RowReversed`	Items are laid out from right to left.
`FlexboxLayout.Column`	Items are laid out from top to bottom.
`FlexboxLayout.ColumnReversed`	Items are laid out from bottom to top.

The default value is FlexboxLayout.Row.

gap : real

This property holds the amount of space that need to be applied to the FlexboxLayout both along the inline axis and block axis.

The default value is 0.

justifyContent : enumeration

This property specifies the distribution of the items along the main-axis of the flex box layout.

Possible values:

Constant	Description
`FlexboxLayout.JustifyStart`	(default) Items are aligned to the start of the flex box layout.
`FlexboxLayout.JustifyCenter`	Items are aligned along the center of the flex box layout.
`FlexboxLayout.JustifyEnd`	Items are aligned to the end of the flex box layout.
`FlexboxLayout.JustifySpaceBetween`	The spaces are evenly distributed between the items and no space along the edges of the flex box layout.
`FlexboxLayout.JustifySpaceAround`	The spaces are evenly distributed between the items and half-size space on the edges of the flex box layout.
`FlexboxLayout.JustiftSpaceEvenly`	The spaces are evenly distributed between the items and edges of the flex box layout.

The default value is FlexboxLayout.JustifyStart.

rowGap : real

This property holds the amount of space that need to be applied to the FlexboxLayout along the block axis. Setting this property overrides the gap value affecting the block axis.

The default value is 0.

wrap : enumeration

This property specifies that the items within the flex box layout can wrap or not and it happens when the children overflow the size of the flex box layout. If the items are wrapped, it will be placed in multiple lines depending on overflow condition as stated. Each line takes up the maximum size of the item along the cross-axis.

Possible values:

Constant	Description
`FlexboxLayout.Wrap`	Items are wrapped into multiple lines within the flex box layout.
`FlexboxLayout.NoWrap`	(default) Items are not wrapped and laid out in single line within the flex box layout.
`FlexboxLayout.WrapReverse`	Items are wrapped into multiple lines within the flex box layout in the reverse direction.

The default value is FlexboxLayout.NoWrap.

Attached Property Documentation

FlexboxLayout.alignSelf : enumeration

This attached property allows to align this item in the flex box layout along the cross-axis and it overrides the parent flex box layout property alignItems.

By default, the child item inherit the alignment from the parent and it can override the parent flex box layout alignItems property with the values FlexboxLayout.AlignStart, FlexboxLayout.AlignCenter and FlexboxLayout.AlignEnd.

The default value is FlexboxLayout.AlignAuto.

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.