Implement QtQuick layout compatible with Flexbox

Figma uses a layout system that is based on CSS Flexbox (Flexible Box).

For research see: https://intranet.qt.io/display/QTRD/Qt+Quick+Responsive+Layouts+-+Research

When we talk to users about what they need in a responsive layout the top answers seem to be Flexbox, CSS Grid, Yoga, Masonry, Smart Layouts (Figma) Importantly, these are not all the same thing, have different properties, use-cases, strengths and weaknesses. We need to define and identify these before we can decide on what we want to build.

Flexbox is the commonly-used name for the CSS Flexible Box Layout Module, a layout model for displaying items in a single dimension — as a row or as a column.

Figma's Auto Layout is a feature that allows designers to create responsive and flexible designs by automatically adjusting the layout of components based on content changes.

https://www.figma.com/widget-docs/api/component-AutoLayout/
https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

Figma's Auto Layout can be inferred from the api documentation. Looks like a Flexbox Inspired Layout with a few sprinkles.

https://www.figma.com/plugin-docs/api/properties/nodes-layoutmode/

To properly support auto-layouts from Figma QtQuick requires a compatible Flexbox layout.

The current suggestion is to base the Flexbox implentation on Yoga.
Yoga is an open-source, cross-platform layout engine developed by Facebook. It is primarily associated with the React Native framework and is responsible for calculating the layout of UI components in a flexible and efficient manner. Yoga implements the Flexbox layout model.

https://yogalayout.dev/

QML flex layout
https://github.com/tripolskypetr/qml-flexbox
This repository contains a set of qt quick bindings to the Yoga layout engine from React Native for rendering Flexbox. QML flex layout is not production quality, but can be used as a proof of concept.