Groups in Flex can be configured to stack internal content. The added structure of a stacked layout allows for greater organization when creating responsive experiences.
Setting up a Responsive Layout
There are three ways content can be laid out inside a group. Before we dive into them, it's important to note that a group's internal content position must be set to Stack for the layouts to work correctly, as absolutely-positioned content is not affected by anything else on the canvas (including group layout settings). However, when a group's layout is set to one of the below options, its internal content's positioning will automatically be set to Stack. Below is a table that provides an overview of the different layout types in Flex.
Manual | The default layout setting used to manually place absolutely-positioned internal content |
Column | Stacks internal content in a vertical column |
Row | Stacks internal content in a horizontal row |
To set a group's layout:
Select the group on the canvas
Navigate to the Inspector Panel while in Design Mode
Select the desired layout under the Layout section
After setting a group's layout, it can be switched at any point following the same process outlined above.
Adjusting Layout Settings and Behaviors
In the Layout section of the Inspector Panel, Column and Row layouts can be further configured with the following settings:
Vertical/Horizontal Centering | Centers the objects at the top, bottom, left, right, and equally spreads them out within the container |
Padding | Adds or removes white space between the top, bottom, left, or right border of the container and the stacked objects |
Gap | Adds or removes white space between stacked objects |
Wrap | Determines whether or not the stacked objects will re-stack, or wrap, onto a second column or row if the stack is larger than the container |
Clip Content | Determines whether stacked content is visible outside the container's border if Wrap is turned off |
The above configurations aren't exclusive to groups, but apply to all containers with Stack positioning, including Sections.