Studio Editor: About Stack

2 min read
A stack is a flexbox container that "hugs" your elements, whether they are in a vertical or horizontal order. Stack elements to ensure they look great on every screen size, preventing overlaps (small screens) and big gaps (large screens). 

Choose the stack direction

When placing elements in a stack, you can choose the direction - horizontal or vertical. This depends on whether you want the elements to appear in a vertical or horizontal order. 
Either way, you can always switch the direction. This automatically rearranges the elements so they're in the right order. 
An example of a horizontal stack turned to vertical, the elements are now in a vertical order

Drag and drop to set spacing

Our drag and drop functionality makes it easier than ever to set spacing between elements in a stack.
Dragging the spaces between stack items to increase margins
You can also create negative margins to make elements overlap intentionally. 
Dragging the stack margins to the opposite direction to create an overlap between the image and text

Design the stack to your needs

The stack container is transparent by default, but you can design it to your needs from the Inspector panel. Add a background color, border and shadow to make the stack stand out. 
A screenshot of the inspector panel and a stack selected on the canvas, showing the design options

Did this help?

|