Stacks and Relative Positioning in Framer
Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.
Stacks allow us to create rows or columns of elements that automatically align, distribute, and space themselves within the available space. Which not only means less tedious scaling and repositioning for us on the canvas — but also lets us build bulletproof layouts that can flex and adapt when things change size in browser.
Stacks not only unlock relative positioning — but also new sizing options that can make elements fill their parent — or make a parent frame automatically fit its children. In this lesson, we’re going to look at how Stacks and Relative positioned layers work, how they make our lives easier, and of course when to use them. If you’re already familiar with auto-layout in Figma or Flexbox in CSS, you’ve got a head start — but either way, you’re in the right place because we’re going to start with the basics. Let’s jump in.
