Skip to main content
Version: 8.1

Flex Container User Interface

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.

Direction‚Äč

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.

Direction: Row‚Äč

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.

note

Left/right/top/bottom notes in the descriptions refer to non-reversed directions. The phrase "when there is extra space" means when no components have are stretching to fill the space. That is, when no components have "grow" greater than 0.

ItemsRow IconRow Reversed IconProperty
Flex StartChild items are placed along the start (top) of the container when there is extra space.
CenterChild items are placed along the center of the container when there is extra space.
Flex EndChild items are placed along the end (bottom) of the container when there is extra space.
StretchChild items are stretched from top to bottom of the container.
BaselineChild items are placed so the baseline of the text matches for all of them when there is extra space.

Justify

Row IconRow Reversed IconPropertyDescription
Flex startAdjusts placement of children to the start (left) of the container when there is extra space. If reversed, children are placed along the right.
CenterAdjusts placement of children along the center of the container when there is extra space.
Flex EndAdjusts placement of children along the end (right) of the container when there is extra space. If reversed, children are placed along the left.
Space BetweenAdjusts placement of children with space in between them reaching to the edges of the container when there is extra space.
Space AroundAdjusts placement of children with even spacing in between them with some space along the edges when there is extra space.
Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.

Children

IconPropertyDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.
Reverse WrapToggle to reverse the direction of wrap from top-down to bottom-up

Content

The following properties are only applicable when children: Wrap is selected.

Row IconRow Reversed IconPropertyDescription
Flex startAdjusts placement of wrapped content to the start (top) of the container when there is free space.
CenterAdjusts placement of wrapped content to the middle of the container when there is free space.
Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.
Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (top and bottom) of the container when there is extra space.
Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (top and bottom) of the container when there is extra space.
StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line (bottom) of the container when there is extra space.

Direction: Column‚Äč

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.

Items

Column IconColumn Reversed IconPropertyDescription
Flex startChild items are placed along the start (left) of the container when there is extra space.
CenterChild items are placed along the center of the container when there is extra space.
Flex EndChild items are placed along the end (right) of the container when there is extra space.
StretchChild items are stretched from left to right of the container.
BaselineChild items are placed so the baseline of the text matches for all of them when there is extra space.

Justify

Column IconColumn Reversed IconPropertyDescription
Flex startAdjusts placement of children to the start (top) of the container when there is extra space. If reversed, children are placed along the bottom.
CenterAdjusts placement of children along the center of the container when there is extra space.
Flex EndAdjusts placement of children along the end (bottom) of the container when there is extra space. If reversed, children are placed along the top.
Space BetweenAdjusts placement of children with space in between them reaching to the edges of the container when there is extra space.
Space AroundAdjusts placement of children with even spacing in between them with some space along the edges when there is extra space.
Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.

Children

IconPropertyDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.
ReverseToggle to reverse the direction of wrap from top-down to bottom-up

Content The following properties are only applicable when children: Wrap is selected.

Column IconColumn Reversed IconPropertyDescription
Flex startAdjusts placement of wrapped content to the start (left) of the container when there is free space.
CenterAdjusts placement of wrapped content to the middle of the container when there is free space.
Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.
Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (left and right) of the container when there is extra space.
Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (left and right) of the container when there is extra space.
StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line of the container when there is extra space.