Flexbox Item Properties

The children of a FlexboxLayout can set layout-order to control their visual order individually.

Note: this property is experimental and subject to change. Nothing in it is specific to flexbox — it could apply to HorizontalLayout and VerticalLayout too — so expect it to be extended to the box layouts.

The Experimental Features overview page explains how to enable it.

FlexboxLayout {
    Rectangle { layout-order: 2; }
    Rectangle { layout-order: 1; }  // appears first
}

slint

layout-order behaves like the CSS order property, with the same default (0): items are laid out in ascending order value, and items with the same value keep their declaration order.

The other CSS per-item flexbox properties are expressed with the properties the other layouts already use:

CSS	Slint
flex-grow	alignment: stretch on the container, weighted per item by horizontal-stretch / vertical-stretch; max-width / max-height caps growing (space a capped item cannot take stays free)
flex-shrink	nothing to opt into: every item shrinks, in proportion to its preferred size; min-width / min-height refuses shrinking
flex-basis	preferred-width (row) / preferred-height (column)
align-self	cross-axis-self-alignment (stable)