LESSON 06

Stack.

Stacking is a way to control the relationship between elements that are arranged above and below each other on your canvas. Stack automatically puts elements inside a Flex container which prevents overlap when the viewport changes size.

See stack in action.

Stacking keeps a vertical margin between elements. Resize your browser and see how the elements below keep a clear space between them. 

Switching elements.

You can drag a new element into a stack, and you can switch the order of stacked elements.

Unstacking elements.

You can break up a stack to release elements from their Flex container. Click anywhere in your stack, select Stack from the blue breadcrumbs and click Unstack. From the Layers panel, you’ll see that the stack has been removed. 

 

Note: This action re-parents the stacked elements and adjusts the hierarchy of your site, so the change affects all breakpoints.

TRY IT YOURSELF

Exercise on stack.

​Open Academy X from desktop to complete this exercise.

01

Attach text to the container. Drag the title text into the container. Now drag the paragraph text underneath it. Use the handles to resize the canvas and watch how the elements overlap on different screen sizes. 

02

Create a stack. Select the title and paragraph text. Click Stack to create a Flex container with these elements inside. Resize the canvas. You’ll notice that the vertical margin between the text elements remains the same on every screen size.

03

Add elements. Drag the button into the stack and place it below the paragraph. Click Attach to Stack. You should see the margins between elements highlighted in light blue.

04

Reorder a stack. Drag the button and place it above the title text. Resize the canvas to see how it looks on different screen sizes.

05

Unstack elements. Click anywhere in your stack to open the blue breadcrumbs. Select Stack, then click Unstack. Open the Layers panel to see that the stack has disappeared. Move to desktop, tablet and mobile and see that the change has affected all breakpoints.

Start this exercise at the desktop breakpoint (1001px & Up). Use the drag handles to resize the canvas and see how the container responds to different screen sizes.

Watch related videos.