I’m Kayla from Wix Studio — back to show you how to use Stack.
I’ll show you how to create a vertical and horizontal Stack, and how to reorder and align stacked elements.
Here’s how it works.
Stack creates a relationship between elements to keep them from overlapping or drifting apart as the screen resizes.
To make a vertical Stack, align your elements one above the other, select them all and hit Stack.
To make a horizontal Stack, same idea. Position them next to each other, multiselect, hit Stack.
I can see the Stack direction from here under Layout.
If I want to remove an element from a Stack, I can just select it and drag it out.
To add an element to the Stack, drag it over until you see “Attach”. Then drop it.
When you select a Stack, the margins between the elements are indicated by these blue strips.
Move elements further apart or closer together by dragging these handles.
To adjust the spacing of all the elements at once, hold down Shift while you drag the handles. The other elements move as well.
You can see the margin’s value go up or down on the canvas. When you look closer in the Inspector, you can see the indication in the item spacing property under layout and you can set it from there as well.
If I want to resize the whole Stack, I can just grab the outer edge and drag. Resizing this way keeps the same relative spacing between elements and wraps any text.
When I want to reorder elements, I can select one and use these arrows to move it. Or I can go to my Layers panel and drag the elements to reorder them.
Sometimes you’ll have elements on the canvas that aren’t clearly aligned vertically or horizontally. When I select these, I’m only asked if I want to place them in a container.
I’ll click these three dots to stack them. Then I can choose which direction I want.
You can make certain changes to a Stack and its child elements across breakpoints.
For example, you can reorder the elements.
Or even change their direction.
These changes cascade down, but you won’t see them reflected at higher breakpoints.
And there you go. Now you know how to use Stack.
Until next time.
