FlexboxLayout

FlexboxLayout is a flexible box layout that arranges its children in rows or columns with automatic wrapping. It implements a CSS Flexbox-like layout model suitable for creating flexible, responsive UIs.

// This example demonstrates FlexboxLayout with row direction (default)
export component Foo inherits Window {
    width: 300px;
    height: 150px;
    FlexboxLayout {
        spacing: 8px;
        padding: 8px;
        flex-direction: row;
        Rectangle { background: red; width: 60px; height: 50px; }
        Rectangle { background: blue; width: 60px; height: 50px; }
        Rectangle { background: yellow; width: 60px; height: 50px; }
        Rectangle { background: green; width: 60px; height: 50px; }
        Rectangle { background: purple; width: 60px; height: 50px; }
    }
}

slint

// This example demonstrates FlexboxLayout with column direction
export component Foo inherits Window {
    width: 200px;
    height: 300px;
    FlexboxLayout {
        spacing: 8px;
        padding: 8px;
        flex-direction: column;
        Rectangle { background: red; width: 50px; height: 60px; }
        Rectangle { background: blue; width: 50px; height: 60px; }
        Rectangle { background: yellow; width: 50px; height: 60px; }
        Rectangle { background: green; width: 50px; height: 60px; }
        Rectangle { background: purple; width: 50px; height: 60px; }
    }
}

slint

Overview

In row direction, items are placed from left to right. When the available width is exceeded, items automatically wrap to the next row. In column direction, items are placed from top to bottom and wrap to the next column when the available height is exceeded.

Spacing Properties

spacing

lengthdefault: 0px

The distance between the elements in the layout. CSS Flexbox usually calls this “gap”, but “spacing” is used in Slint for consistency with other layout types. This single value is applied as both horizontal and vertical spacing between items.

To target specific directions with different values use the following properties:

spacing-horizontal

lengthdefault: 0px

The horizontal distance between items in the layout. CSS Flexbox calls this “column-gap”.

spacing-vertical

lengthdefault: 0px

The vertical distance between items in the layout. CSS Flexbox calls this “row-gap”.

Padding Properties

padding

lengthdefault: 0px

The padding around the layout as a whole. This single value is applied to all sides.

To target specific sides with different values use the following properties:

padding-left

lengthdefault: 0px

padding-right

lengthdefault: 0px

padding-top

lengthdefault: 0px

padding-bottom

lengthdefault: 0px

Alignment Properties

alignment

enum LayoutAlignmentdefault: start

Set the alignment of items along the main axis. CSS Flexbox calls this “justify-content”. Note that the stretch value has no effect on FlexboxLayout (main-axis stretching in CSS Flexbox is controlled by flex-grow).

LayoutAlignment

Enum representing the alignment property of a HorizontalBox, a VerticalBox, a HorizontalLayout, or VerticalLayout.

• stretch: Use the minimum size of all elements in a layout, distribute remaining space based on *-stretch among all elements.
• center: Use the preferred size for all elements, distribute remaining space evenly before the first and after the last element.
• start: Use the preferred size for all elements, put remaining space after the last element.
• end: Use the preferred size for all elements, put remaining space before the first element.
• space-between: Use the preferred size for all elements, distribute remaining space evenly between elements.
• space-around: Use the preferred size for all elements, distribute remaining space evenly between the elements, and use half spaces at the start and end.
• space-evenly: Use the preferred size for all elements, distribute remaining space evenly before the first element, after the last element and between elements.

Direction Properties

flex-direction

enum FlexboxLayoutDirectiondefault: the first enum value

The primary direction in which items are placed. Set to row to place items horizontally left-to-right (default), or column to place items vertically top-to-bottom. It also supports row-reverse and column-reverse which invert the flow: row-reverse places items right-to-left (starting at the right edge), and column-reverse places items bottom-to-top (starting at the bottom edge).

FlexboxLayoutDirection

The direction in which flex items are placed in a flex container.

• row: Items are placed in a row, from left to right.
• row-reverse: Items are placed in a row in reverse order, from right to left.
• column: Items are placed in a column, from top to bottom.
• column-reverse: Items are placed in a column in reverse order, from bottom to top.

cross-axis-line-alignment

enum CrossAxisLineAlignmentdefault: the first enum value

Set the distribution of flex lines along the cross axis. CSS Flexbox calls this “align-content”; the name here pairs with cross-axis-alignment, which aligns the items within one line. The default value is stretch.

CrossAxisLineAlignment

Controls the distribution of flex lines along the cross axis in a flex container. Used as the cross-axis-line-alignment property of FlexboxLayout.

• stretch: Lines are stretched to fill the container along the cross axis.
• start: Lines are placed at the start of the cross axis.
• end: Lines are placed at the end of the cross axis.
• center: Lines are centered along the cross axis.
• space-between: Equal gaps between lines, no gap at the edges.
• space-around: Equal gaps around each line (half-size at edges).
• space-evenly: Equal gaps between lines and at the edges.

cross-axis-alignment

enum CrossAxisAlignmentdefault: the first enum value

Set the alignment of individual items along the cross axis within each flex line. The default value is stretch.

CrossAxisAlignment

Controls the alignment of individual items along the cross axis of a layout. Used as the cross-axis-alignment property of HorizontalLayout, VerticalLayout, and FlexboxLayout.

• stretch: Items are stretched to fill the cross axis.
• start: Items are placed at the start of the cross axis.
• end: Items are placed at the end of the cross axis.
• center: Items are centered along the cross axis.

flex-wrap

enum FlexboxLayoutWrapdefault: the first enum value

Controls whether flex items wrap onto multiple lines when they don’t fit in the container. The default value is wrap.

FlexboxLayoutWrap

Controls whether flex items wrap onto multiple lines.

• wrap: Flex items wrap onto multiple lines, from top to bottom (for row direction) or left to right (for column direction).
• no-wrap: All flex items are laid out on a single line (default for CSS, but Slint defaults to wrap).
• wrap-reverse: Flex items wrap onto multiple lines in the reverse direction.

Layout Behavior

The layouting algorithm for FlexboxLayout is entirely implemented by taffy

You can learn more about the CSS Flexbox specification from

• the Mozilla developer website
• A Complete Guide To Flexbox by CSS Tricks. This is detailed guide with illustrations and comprehensive written explanation of the different Flexbox properties and how they work.