113 lines
8 KiB
Markdown
113 lines
8 KiB
Markdown
---
|
||
title: Авто-раскладка
|
||
description: Flex- и grid-раскладка в OpenPencil — направление, отступы, выравнивание, размеры и CSS Grid дорожки.
|
||
---
|
||
|
||
# Авто-раскладка
|
||
|
||
Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма. Поддерживает два режима: **flex** (горизонтальный/вертикальный поток) и **grid** (строки и столбцы с настройкой дорожек).
|
||
|
||
## Включение авто-раскладки
|
||
|
||
- Выделите фрейм и нажмите <kbd>⇧</kbd><kbd>A</kbd> (<kbd>Shift</kbd> + <kbd>A</kbd>), чтобы включить или выключить авто-раскладку
|
||
- Выделите свободные узлы (без родительского фрейма) и нажмите <kbd>⇧</kbd><kbd>A</kbd>, чтобы обернуть их в новый фрейм с авто-раскладкой
|
||
|
||
При оборачивании выделения узлы сортируются по визуальному положению: слева направо для горизонтальной раскладки, сверху вниз для вертикальной.
|
||
|
||
## Направление раскладки
|
||
|
||
Выберите, как располагаются дочерние элементы:
|
||
|
||
- **Горизонтально** — элементы выстраиваются слева направо
|
||
- **Вертикально** — элементы выстраиваются сверху вниз
|
||
- **Перенос** — элементы переносятся на следующую строку/столбец, когда заканчивается место
|
||
|
||
## Отступы
|
||
|
||
### Промежуток
|
||
|
||
Расстояние между соседними дочерними элементами. Задаётся одним значением, которое применяется между всеми элементами.
|
||
|
||
### Внутренние отступы
|
||
|
||
Расстояние между краем фрейма и его дочерними элементами. Задайте одинаковое значение для всех сторон или разверните для настройки каждой стороны отдельно (верхняя, правая, нижняя, левая).
|
||
|
||
## Выравнивание
|
||
|
||
### Выравнивание по основной оси
|
||
|
||
Определяет, как дочерние элементы распределяются вдоль направления раскладки:
|
||
|
||
- **Начало** — элементы прижимаются к началу
|
||
- **Центр** — элементы по центру
|
||
- **Конец** — элементы прижимаются к концу
|
||
- **Равномерно** — элементы распределяются с равными промежутками между ними
|
||
|
||
### Выравнивание по поперечной оси
|
||
|
||
Определяет, как дочерние элементы позиционируются перпендикулярно направлению раскладки:
|
||
|
||
- **Начало** — элементы выравниваются по началу
|
||
- **Центр** — элементы по центру
|
||
- **Конец** — элементы выравниваются по концу
|
||
- **Растянуть** — элементы растягиваются, заполняя поперечную ось
|
||
|
||
## Размеры дочерних элементов
|
||
|
||
Каждый дочерний элемент в фрейме с авто-раскладкой может иметь собственный режим размера:
|
||
|
||
- **Фиксированный** — использует заданные ширину/высоту элемента
|
||
- **Заполнить** — растягивается, заполняя доступное пространство в родителе
|
||
- **Обнять** — сжимается под размер содержимого элемента
|
||
|
||
## Перетаскивание для изменения порядка
|
||
|
||
Внутри фрейма с авто-раскладкой перетащите дочерний элемент, чтобы изменить его порядок среди соседних элементов. Визуальный индикатор вставки показывает, куда будет помещён элемент.
|
||
|
||
## Панель свойств
|
||
|
||
Когда выделен фрейм с авто-раскладкой, в разделе «Раскладка» панели свойств отображаются все элементы управления: направление, промежуток, внутренние отступы, выравнивание по основной и поперечной осям.
|
||
|
||
## Сочетания клавиш
|
||
|
||
| Действие | Mac | Windows / Linux |
|
||
|----------|-----|-----------------|
|
||
| Переключить авто-раскладку | <kbd>⇧</kbd><kbd>A</kbd> | <kbd>Shift</kbd> + <kbd>A</kbd> |
|
||
|
||
## 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 для панелей управления, галерей и форм — всего, что имеет двумерную структуру.
|
||
- См. [Рисование фигур](./drawing-shapes) для создания фреймов, к которым применяется авто-раскладка.
|
||
- См. [Компоненты](./components) для использования авто-раскладки внутри переиспользуемых компонентов.
|