- Qt 6.12
- Qt Quick
- QML Types
- QtQuick.Layouts
- FlexboxLayout
- Qt 6.12.0 Reference Documentation

# 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: | Technology preview

This type is in technology preview 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:

- FlexboxLayout.alignSelf
- Layout.minimumWidth
- Layout.minimumHeight
- Layout.preferredWidth
- Layout.preferredHeight
- Layout.maximumWidth
- Layout.maximumHeight
- Layout.fillWidth
- Layout.fillHeight
- Layout.margins
- Layout.leftMargin
- Layout.rightMargin
- Layout.topMargin
- Layout.bottomMargin

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.

See also ColumnLayout, GridLayout, RowLayout, StackView, and Qt Quick Layouts Overview.

## 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` | 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` | (default) 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 `[attached]`

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`.