Details
-
Suggestion
-
Resolution: Unresolved
-
P2: Important
-
None
-
None
-
None
Description
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.
Note: Yoga version >= 3.0 - Implementation standard c++ 20. The earlier version 2.0 which is implemented with standard c++ 14.
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/inspiration.
Suggested CSS flexbox -> QML Flex mappings
flexbox container properties ("QML Flex" properties are suggested to be declared on the Flex item):
| CSS flexbox | QML Flex | Comment |
|---|---|---|
| display: flex | FlexBox { ... } | Note, the QML syntax prevents any existing item to have a flex layout of its children |
| flex-direction: row | direction: FlexBox.Row | Similar to GridLayout.flow: GridLayout.LeftToRight |
| flex-direction:column | direction: FlexBox.Column | Similar to GridLayout.flow: GridLayout.TopToBottom |
| flex-direction: row-reverse | direction: FlexBox.RowReverse | Similar to GridLayout.layoutDirection: Qt.RightToLeft |
| flex-direction: column-reverse | direction: FlexBox.ColumnReverse | Not possible in GridLayout |
| flex-wrap: wrap | wrap: FlexBox.Wrap | Can be one of: nowrap | wrap | wrap-reverse |
| flex-flow | shorthand for flex-direction and flex-wrap | |
| justify-content: center | justifyContent: FlexBox.Center | Can be one of: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe Can maybe be just mapped to an enum |
| align-items: stretch | alignItems: FlexBox.Stretch | Can be one of: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end Can maybe be mapped to an enum |
| align-content: flex-start | alignContent: FlexBox.Start | Can be one of: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline |
| gap: 10px | gap: 10 | Also, orientation-specifics attributes: row-gap, column-gap |
Visual information on the flex properties - align-item, align-center, justify-content: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container
Flexbox children properties
| CSS flexbox children | QML Flex children | Comment |
|---|---|---|
| flex-grow: 3 | Layout.stretchFactor: 3 or Flexbox.flexGrow: 3 |
Flexbox.flexGrow: There exists Layout.horizontalStretchFactor and Layout.verticalStretchFactor |
| flex-shrink: 4 | ||
| align-self | Flexbox.alignSelf | Individual alignment, overriding the Flex containers align-items |
| min/max-width | Layout.minimumWidth | |
| min/max-height | Layout.maximumWidth | |
| width+height | This might be a problem if it is expected to be respected | |
| order: 5 | Layout.order: 5 | P3: Not supported by Yoga nor Figma Autolayout |
| flex-basis | Layout.preferredSize | P3: Not supported by Figma Autolayout |
| flex | shorthand for flex-grow, flex-shrink and flex-basis combined | |
Flexbox layout - Yoga vs CSS standard:
CSS Standard: https://www.w3.org/TR/CSS3-flexbox/
- Limitations of Yoga library compared to the CSS standard:
* Display property is always assumed to be 'flex' except for Text nodes, which are assumed to be 'inline-flex'.
* The 'zIndex' property (or any form of z ordering) is not supported. Nodes are stacked in document order.
* The 'order' property is not supported. The order of flex items is always defined by document order.
* The 'visibility' property is always assumed to be 'visible'. Values of 'collapse' and 'hidden' are not supported.
* There is no support for forced breaks.
* It does not support vertical inline directions (top-to-bottom or bottom-to-top text). - Deviations from standard:
* Section 4.5 of the spec indicates that all flex items have a default minimum main size. For text blocks, for example, this is the width of the
widest word. Calculating the minimum width is expensive, so we forego it and assume a default minimum main size of 0.
* Min/Max sizes in the main axis are not honored when resolving flexible lengths.
* The spec indicates that the default value for 'flexDirection' is 'row', but the algorithm below assumes a default of 'column'.
Links:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Attachments
Gerrit Reviews
| For Gerrit Dashboard: QTBUG-133633 | ||||||
|---|---|---|---|---|---|---|
| # | Subject | Branch | Project | Status | CR | V |
| 634080,22 | Support Flexbox layout in Qt Quick | dev | qt/qtdeclarative | Status: NEW | 0 | -1 |