The Flex Container provides an efficient way to lay out, align, and distribute space among components in the container particularly when their size is unknown or dynamic. The Flex Container can alter a component's width and height to best fill the available space to accommodate all types of devices and screen sizes. It expands components to fill available free space, or shrinks them to prevent overflow.
The Flex Container component has two pre-configured variants:
When a Flex container is deep selected, there is a Graphical User Interface (GUI) at the top of the Perspective Property Editor that enables you to set the container's properties. Functionality is similar to that of the properties in the Props Tree, but you may find the visual interface easier or quicker to use.
This sets the direction for the child layout. Options are Row or Column. When the Reverse icon is selected, the contents of this container are displayed in reverse order.
The following table shows the icons and properties they represent when Direction: Row is selected. The icon that's displayed if Reverse order is selected is also shown.
The following table shows the icons and properties they represent when Direction: Column is selected. The icon that's displayed if Reverse order is selected is also shown.
For more information and examples for Flex Containers, refer to Flex Containers.
In the following example, we have three components inside a Flex container: Button, Thermometer, and LED Display. The position properties for the Button and LED Display are set so that their size will not change if the Flex container is resized. However, the Thermometer will shrink or grow depending on the Flex container size.
The following properties are set for the Flex Container:
The following properties are set for the Button component within the container:
The following properties are set for the Thermometer component within the container:
The following properties are set for the LED Display component within the container: