⚠️
Video playback error
0.25x
0.5x
0.75x
1x ✓
1.25x
1.5x
1.75x
2x
0:00:00 / 0:00:00

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)

Enjoy videos in any language, instantly!

Script

Original:

Stacks allow us to create rows or columns of elements that automatically align, distribute, and spread themselves out 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 in the browser change size. 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 gonna look at how stacks and relative position layers work, and how they make our lives easier, and of course, when to use them. If you're already familiar with auto layout in Figma or flex box in CSS, you've got a head start. But either way, you're in the right place because we're gonna start with the basics. Let's jump in.

Translated:

Стеки дозволяють створювати рядки або стовпці елементів, які автоматично вирівнюються, розподіляються та розтягуються у доступному просторі. Це не тільки означає менше нудного масштабування та переміщення на полотні, а й дає змогу створювати надійні макети, що можуть адаптуватися до змін розміру в браузері. Стеки відкривають відносне позиціонування та нові параметри розміру, що дозволяє елементам заповнювати батьківський фрейм або автоматично підганятися під дочірні. Тут ми розглянемо, як працюють Стеки та шари відносного позиціонування, як вони спрощують нам життя і коли їх застосовувати. Якщо ви знайомі з автолейаутом Figma чи flexbox CSS, у вас є перевага. Але в будь-якому випадку, ви в правильному місці, тому що ми почнемо з основ. Давайте починати.