Content positioning is one of the foundational principles for creating responsive content in Flex. It allows content to fluidly reorganize on the canvas as the user's screen width changes. Understanding how to organize and set up content on the canvas correctly is the first step to creating truly responsive experiences.
Content Hierarchy
Flex is fundamentally different from Studio in how it organizes objects, and as a result, how objects react to each other on the canvas. In Studio, the content hierarchy consists of the canvas as the top level and all the objects (text boxes, images, groups, etc.) on the canvas as the second level.
For example, using the alignment options in Studio for an individual asset will align the asset to the canvas, even if that asset is within a group. The only exception is when two objects are selected; then the default behavior is for them to align with each other.
In contrast, Flex uses a more detailed content hierarchy, which consists of:
Canvas
Section
Group
Individual Asset
In Flex, an object is positioned in relation to its parent container in the content hierarchy. So, if an individual asset is in a group, the group would be considered its parent container. If it's not in a group, then the section it is inside of would be its parent container. So, of course, if the asset is not nested inside a group or section, then the canvas would be its parent container.
For example, using the "Left Align" option for a text box within a group will align it to the left border of the group. But if the text box were not nested in a group (or section), it would align to the left side of the canvas.
The same applies for groups, groups within groups, and sections (though sections will always use Inline positioning, detailed below).
Absolute Positioning
Absolute position is the default positioning type in Flex. When an object uses Absolute positioning, it can be freely placed anywhere within its parent container without affecting (or being affected by) the position of other objects in the same parent container. This attribute is the opposite of Slack position (more details below).
When working with multiple responsive variants, using the alignment options on an absolutely positioned object will apply to all variants, regardless of their canvas dimensions.
Absolute positioning is ideal for objects you want to be fixed and stationary within their parent containers. Or, for objects (ideally images) that you want to overlap on the canvas.
Position Constraints:
When setting an individual asset's positioning to Absolute, you can use the Constraints options to set its exact location in relation to its parent container.
For example, if the horizontal reference point of an object is set to "Left" and the corresponding input field is set to 20px, it means the object is 20 pixels from the left border of its parent container, regardless of how wide the canvas becomes.
Select the target asset on the canvas.
Navigate to the Constraints section of the Inspector Panel while in Design mode
Use the Constraints dropdown menus to determine the horizontal and vertical reference points
Use the corresponding input fields to set the position of the object in relation to the set horizontal and vertical "constraints"
There are two methods for setting an object's constraints:
Fixed: Set an exact amount by pixels
Relative: Set based on a percentage of the selected object's parent container
For example, suppose the horizontal reference point is set to "Left" and the corresponding input field is set to 40%. In that case, that means the object's distance from the left border of its parent container is 40% of the total width of the parent container.
Stack Positioning
An object stacks in line with all its siblings within its parent container. Stacked objects cannot overlap and cannot be freely placed on the canvas. The structure and order Stack provides are crucial for creating responsive content that restacks when canvas dimensions change.
Stack is the opposite of Absolute because stacked objects can not be freely placed on the canvas and cannot overlap with other stacked objects. Instead, they stack with one another.
Configuring Stack Positioning:
Stack positioning can be applied to any object or container on the canvas (Sections are set to Stack by default and can not be changed). As mentioned, once an object's position is set to Stack, its layout options are controlled by its parent container.
A container of stacked objects (Canvas, Section, or Group) can configure how the content stacks within it.
Direction | Stacks objects in a vertical column or horizontal row |
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 |
As mentioned, content positioning is one of the foundational principles for creating responsive content in Flex. Learn more about postioning and other foundational responsive principles in our se;f-paced course, Responsive Concepts (part of the Flex Foundations learning and certification program).