Стеки и относительное позиционирование в Framer (Основы, Урок 6)

Описание: Стек позволяет создавать строки или столбцы элементов, которые автоматически выравниваются, распределяются и размещаются в доступном пространстве. Это не только избавляет нас от утомительного масштабирования и изменения положения на холсте, но и позволяет создавать надёжные макеты, способные адаптироваться к изменению размеров элементов в браузере.

Стеки не только открывают доступ к относительному позиционированию, но и предоставляют новые возможности изменения размера, позволяющие элементам заполнять родительский элемент или автоматически подгонять родительский фрейм под дочерние элементы.

В этом уроке мы рассмотрим, как работают стеки и слои с относительным позиционированием, как они упрощают нашу жизнь и, конечно же, когда их использовать.

Если вы уже знакомы с автоматической компоновкой в ​​Figma или Flexbox в CSS, у вас есть преимущество — но в любом случае вы попали по адресу, потому что мы начнём с основ.

00:00 Введение
00:09 Что делают стеки и почему они важны
00:20 Стеки и относительное позиционирование
00:37 Преобразование фреймов в стеки
01:12 Поведение относительного позиционирования в стеках
01:55 Распространенные примеры использования стеков
02:25 Подгонка стеков под содержимое
03:02 Создание стеков с нуля или перенос слоёв
03:55 Стандартное поведение растяжения для новых стеков
04:16 Свойства стека: направление и распределение
05:26 Регулировка зазоров между элементами
05:55 Выравнивание элементов по поперечной оси
06:11 Эффективное использование отступов
06:44 Перенос элементов в стеки
07:02 Применение макетов стеков к кадрам точек останова
07:45 Подведение итогов

🌞 Начните бесплатно: https://framer.link/yt
📚 Узнайте больше: https://framer.link/yt-academy
💎 Присоединяйтесь к сообществу: https://framer.link/yt-community
🎉 Подпишитесь на X: https://framer.link/yt-x