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 viewer's screen width changes. Understanding how to correctly organize and set up content on the canvas is the first step to creating truly responsive experiences.
Content Hierarchy
Flex is fundamentally different than 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. 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.
Pinning Objects
When setting an individual asset's positioning to Absolute, you can use the "Pin to" options to set its exact location on the canvas.
Select the target asset on the canvas
Navigate to the "Pin to" section of the Inspector Panel while in Design mode
Use the "Pin to" drop down menus to determine the horizontal and vertical reference points
For example, if the horizontal reference point is set to "Left" and the corresponding input field (detailed below) is set to 20px, that means the object is 20 pixels from the left border of its parent container
Use the corresponding input fields to set the position of the object in relation to the set horizontal and vertical "Pin to" reference points
There are two methods for placing the object based on the set "Pin to" reference points:
Fixed: Set an exact amount by pixels
Relative: Set based on a percentage of the selected object's parent container
For example, if the horizontal reference point is set to "Left" and the corresponding input field is set to 40%, that means the object's distance from the left border of its parent container is 40% of the total width of the parent container
Inline Positioning
Inline positioning locks objects to the top-left of their parent containers. Multiple Inline objects in the same parent container can not overlap but will be vertically stacked according to their order in the Layers Panel. Inline positioning may initially seem restrictive or unnecessary, but it is key to retaining content structure and order when working across multiple responsive variants. It ensures objects don't overlap or move out of place within their shared parent container as the experience responsively scales.
As mentioned, content positioning is one of the foundational principles for creating responsive content in Flex. Learn more about other foundational responsive principles to get the most out of Flex:
Responsive Content Sizing
Responsive Text Styles
Flex Groups
Additionally, check out this breakdown of setting up a responsive hero section while utilizing all of the above (documentation on the above points coming soon).