Add support for FlexBox layout

[tronical]

Make it possible to use layouts in .60 files that are based on the CSS flex box layout.

Stretch offers itself as an implementation in Rust for that purpose.

Acceptance criteria: Flex layouts can be used in .60 files and their API is documented.

[tronical]

We're closing this for now and might re-visit this later in the context of UIs that need to adapt well to different form factors. This may go beyond just a layout but rather how to define which aspects to show/hide/collapse for example.

[JerwuQu]

I bumped into this issue when trying to create a layout with wrapping/reflow in my Slint application.

The main issue is not limited to multiple form factors, but now that Slint actually does support them, could this be reopened?

Here's a small HTML example of a layout that is desired but is (to my knowledge) currently impossible:

<style>
body { margin: 0; }
.box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}
.box div {
    flex: 1;
    min-width: 100px;
    max-width: 300px;
    min-height: 100px;
    margin: 8px;
    background-color: pink;
    border: 1px solid red;
}
</style>
<div class="box">
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div></div>
</div>

Try resizing the browser window to see how the layouting works.

This particular example is a bit complex, but is very typical for things like image galleries or something like the YouTube homepage.

[woile]

This would be super useful for my current use case, I'm trying to build something like this in slint:

<p>
this is a paragraph with <a href="example.com">links</a> and 
<a href="example.com">more links</a>, and it's hard to create.
</p>

I've been playing with GridLayout, VerticalLayout and HorizontalLayout. What's the approach to build something like this? It always ends up adding horizontal scroll overflow, but I want it to wrap down.

This is my code in slint (Link inherits from Text):

HorizontalLayout {
    // max-width: 340px;
    spacing: 5pt;
    Link {
        text: "temporis-logo";
        url: "https://github.com/reciperium/temporis/blob/main/assets/icons/logo.svg";
        vertical-alignment: center;
    }

    Text {
        text: "© 2025 by";
        vertical-alignment: center;
    }

    Link {
        text: "Lara Sitruk";
        url: "https://www.instagram.com/lazomicreative/";
        vertical-alignment: center;
    }

    Text {
        text: "is licensed under";
        vertical-alignment: center;
    }

    Link {
        text: "CC BY 4.0";
        url: "https://creativecommons.org/licenses/by/4.0/";
        vertical-alignment: center;
    }
}

[smir-ant]

up

[narnaud]

Could be interesting to integrate something like taffy. Seems to be used by many different UI toolkit already.