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.
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 | Flex { ... } | Note, the QML syntax prevents any existing item to have a flex layout of its children |
| flex-direction: row | direction: Flex.Row | Similar to GridLayout.flow: GridLayout.LeftToRight |
| flex-direction:column | direction: Flex.Column | Similar to GridLayout.flow: GridLayout.TopToBottom |
| flex-direction: row-reverse | direction: Flex.RowReverse | Similar to GridLayout.layoutDirection: Qt.RightToLeft |
| flex-direction: column-reverse | direction: Flex.ColumnReverse | Not possible in GridLayout |
| flex-wrap: wrap | wrap: Flex.Wrap | Can be one of: nowrap | wrap | wrap-reverse |
| flex-flow | shorthand for flex-direction and flex-wrap | |
| justify-content: center | justifyContent: Flex.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: Flex.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: Flex.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 |
flexbox children properties
| CSS flexbox children | QML Flex children | Comment |
|---|---|---|
| order: 5 | Layout.order: 5 | |
| flex-grow: 3 | Layout.stretchFactor: 3 | There exists Layout.horizontalStretchFactor and Layout.verticalStretchFactor |
| flex-shrink: 4 | Semantic unclear | |
| flex-basis | Semantic unclear | |
| flex | shorthand for flex-grow, flex-shrink and flex-basis combined | |
| align-self | Layout.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 |
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,6 | WIP: Flexbox | dev | qt/qtdeclarative | Status: NEW | -2 | 0 |