Layout

Flex Layout

Flex Layout is a powerful layout system that enables the creation of flexible and responsive user interfaces.

Currently, two types of widgets support flex layout:

• Container
• Screen itself

Flex Layout Configuration Steps

1. Click on Screen or create a Container component
2. Set the layout property to flex
3. Configure flex flow, main align, track align properties
4. Add padding row/column to adjust space between children
5. Use percentage-based sizing to ensure children components adapt to the container size
6. If the children have fixed size, then you can set size of Container to Auto to fit in content

Flex Layout Example

The following example demonstrates a flex layout implementation using nested Container components.

Buttons, dropdowns, and checkboxes are automatically centered within the container without requiring explicit position settings.