Flexbox Item Properties

The children of a FlexboxLayout can set flex-grow, flex-shrink, flex-basis, flex-align-self and flex-order to control how the layout treats them individually.

Note: these properties are experimental and subject to change. Per-item properties shouldn’t be specific to FlexboxLayout — they should work in HorizontalLayout, VerticalLayout and GridLayout too, and preferably reuse the existing horizontal-stretch/vertical-stretch and min/max/preferred size properties. That design discussion is still open, which is why these five are not part of the stable API yet. Expect them to be renamed, or replaced by the properties the other layouts already use.

The Experimental Features overview page explains how to enable them.

FlexboxLayout {
    Rectangle { flex-grow: 1; }
    Rectangle { flex-grow: 2; }
}

slint

Each one behaves like the CSS property of the same name, with the same default, so refer to the CSS flexbox documentation for what they do:

Property	CSS property	Default
flex-grow	flex-grow	0
flex-shrink	flex-shrink	1
flex-basis	flex-basis	auto
flex-align-self	align-self	auto
flex-order	order	0

One difference: an auto flex-basis uses the item’s preferred-width (row direction) or preferred-height (column direction), rather than sizing it from its content.