FlexboxLayout - Slint

import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro'; import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';

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.

Note: FlexboxLayout is experimental and subject to change. Tracking issue: slint-ui/slint#66.

slint

// This example demonstrates FlexboxLayout with row direction (default)
export component Foo inherits Window {
    width: 300px;
    height: 200px;
    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; }
    }
}

</CodeSnippetMD> <CodeSnippetMD imagePath="/src/assets/generated/flexboxlayout-example2.png" imageWidth="150" imageHeight="250" imageAlt='flexboxlayout example with column direction'>

slint

// This example demonstrates FlexboxLayout with column direction
export component Foo inherits Window {
    width: 300px;
    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; }
    }
}

</CodeSnippetMD>

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

<SlintProperty propName="spacing" typeName="length"> 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. </SlintProperty>

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

spacing-horizontal

<SlintProperty propName="spacing-horizontal" typeName="length"> The horizontal distance between items in the layout. CSS Flexbox calls this "column-gap". </SlintProperty>

spacing-vertical

<SlintProperty propName="spacing-vertical" typeName="length"> The vertical distance between items in the layout. CSS Flexbox calls this "row-gap". </SlintProperty>

Padding Properties

padding

<SlintProperty propName="padding" typeName="length"> The padding around the layout as a whole. This single value is applied to all sides. </SlintProperty>

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

padding-left

padding-right

padding-top

padding-bottom

Alignment Properties

alignment

<SlintProperty propName="alignment" typeName="enum" enumName="LayoutAlignment"> 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`). </SlintProperty>

Direction Properties

flex-direction

<SlintProperty propName="flex-direction" typeName="enum" enumName="FlexboxLayoutDirection"> 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). </SlintProperty>

flex-wrap

<SlintProperty propName="flex-wrap" typeName="enum" enumName="FlexboxLayoutWrap"> Controls whether flex items wrap onto multiple lines when they don't fit in the container. The default value is `wrap`. </SlintProperty>

align-content

<SlintProperty propName="align-content" typeName="enum" enumName="FlexboxLayoutAlignContent"> Set the distribution of flex lines along the cross axis. The default value is `stretch`. </SlintProperty>

cross-axis-alignment

<SlintProperty propName="cross-axis-alignment" typeName="enum" enumName="CrossAxisAlignment"> Set the alignment of individual items along the cross axis within each flex line. The default value is `stretch`. </SlintProperty>

Per-Item Properties

The following properties can be set on individual children of a FlexboxLayout:

flex-grow

<SlintProperty propName="flex-grow" typeName="float"> Controls how much an item grows relative to other flex items when there is extra space along the main axis. A value of `0` (default) means the item does not grow. Items with higher values receive proportionally more extra space. </SlintProperty>

flex-shrink

<SlintProperty propName="flex-shrink" typeName="float"> Controls how much an item shrinks relative to other flex items when items overflow the container along the main axis. Default is `1` (matching CSS behavior). A value of `0` means the item does not shrink. Items with higher values shrink proportionally more. </SlintProperty>

flex-basis

<SlintProperty propName="flex-basis" typeName="length"> Sets the initial main size of a flex item before growing or shrinking is applied. If not set, the item's `preferred-width` (row) or `preferred-height` (column) is used. </SlintProperty>

flex-align-self

<SlintProperty propName="flex-align-self" typeName="enum" enumName="FlexboxLayoutAlignSelf"> Overrides the container's `cross-axis-alignment` for this specific item. The default value is `auto`, which inherits the container's `cross-axis-alignment` setting. </SlintProperty>

flex-order

<SlintProperty propName="flex-order" typeName="int"> Controls the visual order of flex items. Items with lower values appear first. Items with the same order value preserve their declaration order. The default value is `0`. </SlintProperty>

Layout Behavior

The layouting algorithm for FlexboxLayout is entirely implemented by <a href="https://github.com/DioxusLabs/taffy">taffy</a>

You can learn more about the CSS Flexbox specification from

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts">the Mozilla developer website</a>
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide To Flexbox by CSS Tricks</a>. This is detailed guide with illustrations and comprehensive written explanation of the different Flexbox properties and how they work.