Stack Elements
Last updated
Was this helpful?
Last updated
Was this helpful?
Stacks are containers that group multiple elements together in a horizontal or vertical layout.
They act like a flexible canvas within your page, allowing you to precisely position and arrange elements to keep them from overlapping or drifting apart as the screen resizes.
Steps:
Click an element that you want to be in the Stack.
Hold down the Shift key and select the other elements to stack them together.
Once you use a stack, nested elements will be set to auto-space between.
You can't apply constraints to any elements within the stack. However, you can still apply constraints to the stack itself.
Steps:
Select the Stack you want to edit
In the Inspector panel, make relevant changes to the settings.
Besides other common settings (colors, backgrounds, effects, etc.), settings specialized for Stack are included in the Design tab > Auto layout.
Direction: Set the way the stack will flow:
Distribute: Set the alignment of the element when stacked horizontally.
Align: Set the alignment of the element when stacked vertically.
Gap: Change the gap (margin) between the rows and columns within the stack.
If the stack direction is set to vertical or horizontal, you'll be able to set the gap between elements vertically (row gap) or horizontally (column gap), respectively.
Padding: Padding controls the empty or white space between the boundary of a stack and the elements within it. You can adjust padding uniformly for all sides, or fine-tune it individually for top, right, bottom, or left.
When an element is placed within a Stack (Auto-layout), it cannot be freely repositioned. Instead, it aligns with the direction of the stack. However, enabling the Absolute Position option allows you to freely drag and position the element as needed, just like in normal layouts.
Static: Default position; follows the normal layout flow.
Relative: Stays in the layout flow but can be moved slightly from its original spot.
Absolute: Removed from the layout flow and positioned relative to its nearest positioned ancestor or the page.
Sticky: Acts like relative but becomes fixed when scrolling reaches a set point (e.g., sticky headers).
Select the stack direction: Stack vertical or Stack horizontal. The stack direction can also be set to Wrap using the .
Pro tip: Quick stack your selected elements vertically by using the keyboard shortcut: Ctrl + (Enter/ Return).
.
To unstack elements, select the stack in the editor, then clich Unstack, or use the keyboard shortcut: Ctrl + + .
(Vertical): Add, remove, and reorder objects along the y-axis.
(Horizontal): Add, remove, and reorder objects along the x-axis.
(Wrap): Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line.
