Авто-раскладка
Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма. Поддерживает два режима: flex (горизонтальный/вертикальный поток) и grid (строки и столбцы с настройкой дорожек).
Включение авто-раскладки
- Выделите фрейм и нажмите ⇧A (Shift + A), чтобы включить или выключить авто-раскладку
- Выделите свободные узлы (без родительского фрейма) и нажмите ⇧A, чтобы обернуть их в новый фрейм с авто-раскладкой
При оборачивании выделения узлы сортируются по визуальному положению: слева направо для горизонтальной раскладки, сверху вниз для вертикальной.
Направление раскладки
Выберите, как располагаются дочерние элементы:
- Горизонтально — элементы выстраиваются слева направо
- Вертикально — элементы выстраиваются сверху вниз
- Перенос — элементы переносятся на следующую строку/столбец, когда заканчивается место
Отступы
Промежуток
Расстояние между соседними дочерними элементами. Задаётся одним значением, которое применяется между всеми элементами.
Внутренние отступы
Расстояние между краем фрейма и его дочерними элементами. Задайте одинаковое значение для всех сторон или разверните для настройки каждой стороны отдельно (верхняя, правая, нижняя, левая).
Выравнивание
Выравнивание по основной оси
Определяет, как дочерние элементы распределяются вдоль направления раскладки:
- Начало — элементы прижимаются к началу
- Центр — элементы по центру
- Конец — элементы прижимаются к концу
- Равномерно — элементы распределяются с равными промежутками между ними
Выравнивание по поперечной оси
Определяет, как дочерние элементы позиционируются перпендикулярно направлению раскладки:
- Начало — элементы выравниваются по началу
- Центр — элементы по центру
- Конец — элементы выравниваются по концу
- Растянуть — элементы растягиваются, заполняя поперечную ось
Размеры дочерних элементов
Каждый дочерний элемент в фрейме с авто-раскладкой может иметь собственный режим размера:
- Фиксированный — использует заданные ширину/высоту элемента
- Заполнить — растягивается, заполняя доступное пространство в родителе
- Обнять — сжимается под размер содержимого элемента
Перетаскивание для изменения порядка
Внутри фрейма с авто-раскладкой перетащите дочерний элемент, чтобы изменить его порядок среди соседних элементов. Визуальный индикатор вставки показывает, куда будет помещён элемент.
Панель свойств
Когда выделен фрейм с авто-раскладкой, в разделе «Раскладка» панели свойств отображаются все элементы управления: направление, промежуток, внутренние отступы, выравнивание по основной и поперечной осям.
Сочетания клавиш
| Действие | Mac | Windows / Linux |
|---|---|---|
| Переключить авто-раскладку | ⇧A | Shift + A |
CSS Grid
Grid-раскладка организует дочерние элементы в строки и столбцы с явным размером дорожек.
Включение сетки
Выберите фрейм с включённой авто-раскладкой и нажмите на значок сетки в панели инструментов раскладки, чтобы переключиться с flex на grid.
Размеры дорожек
Определите дорожки столбцов и строк тремя способами:
- fr — дробная единица, делит доступное пространство пропорционально
- px — фиксированный размер в пикселях
- auto — подстраивается под содержимое
Промежутки сетки
Задайте раздельные горизонтальные (между столбцами) и вертикальные (между строками) промежутки.
Позиционирование дочерних элементов
Элементы размещаются в ячейках сетки автоматически в порядке строк. Вы можете переопределить размещение значениями начала столбца/строки и охвата в свойствах раскладки дочернего элемента.
Экспорт JSX и Tailwind
Grid-раскладки экспортируются как JSX с классами Tailwind: grid grid-cols-3, gap-x-4 gap-y-2, col-start-2 row-span-2.
Советы
- Авто-раскладка пересчитывается сразу после создания, поэтому границы выделения обновляются немедленно.
- Вкладывайте фреймы с авто-раскладкой для создания сложных адаптивных макетов (например, вертикальный фрейм, содержащий горизонтальные строки).
- Используйте размер «Заполнить», чтобы элемент занял оставшееся пространство, аналогично flex-grow: 1 в CSS.
- Используйте grid для панелей управления, галерей и форм — всего, что имеет двумерную структуру.
- См. Рисование фигур для создания фреймов, к которым применяется авто-раскладка.
- См. Компоненты для использования авто-раскладки внутри переиспользуемых компонентов.