Автоматическая компоновка
Автоматическая компоновка размещает дочерние объекты внутри фрейма. Доступны два режима: Flex с горизонтальным или вертикальным потоком и Grid со строками, столбцами и настраиваемыми дорожками.
Включение
- Выделите фрейм и нажмите ⇧A, чтобы включить или отключить автоматическую компоновку.
- Выделите несколько отдельных объектов и нажмите ⇧A, чтобы поместить их в новый фрейм.
При создании фрейма 4B Pen сначала сортирует объекты по их видимому положению.
Направление
- Горизонтальное: объекты располагаются слева направо.
- Вертикальное: объекты располагаются сверху вниз.
- Перенос: при нехватке места объекты переходят на следующую строку или в следующий столбец.
Расстояния
Интервал
Интервал определяет расстояние между соседними дочерними объектами.
Внутренние отступы
Внутренние отступы задают расстояние между границей фрейма и его содержимым. Можно использовать одно общее значение или настроить каждую сторону отдельно.
Выравнивание
Основная ось
- Начало: объекты располагаются у начала оси.
- Центр: объекты выравниваются по центру.
- Конец: объекты располагаются у конца оси.
- Распределить: свободное место равномерно распределяется между объектами.
Поперечная ось
- Начало: выравнивание по началу поперечной оси.
- Центр: выравнивание по центру.
- Конец: выравнивание по концу оси.
- Растянуть: дочерние объекты занимают всю поперечную ось.
Размер дочерних объектов
- Фиксированный: использовать явно заданную ширину или высоту.
- Заполнить: занять доступное место.
- По содержимому: подобрать размер по содержимому.
Первое фактическое изменение ширины или высоты переводит только эту ось из режима «Заполнить» или «По содержимому» в фиксированный режим. Простое получение фокуса полем не меняет режим размера.
Изменение порядка
Перетащите дочерний объект внутри фрейма, чтобы изменить его место среди соседних. Индикатор покажет новую позицию.
Сочетание клавиш
| Действие | macOS | Windows / Linux |
|---|---|---|
| Включить или отключить компоновку | ⇧A | ShiftA |
CSS Grid
Grid размещает дочерние объекты в строках и столбцах с явно заданными размерами дорожек.
Включение Grid
Выделите фрейм с автоматической компоновкой и переключите режим Flex на Grid в разделе «Компоновка».
Размеры дорожек
- fr: пропорциональная доля доступного места.
- px: фиксированный размер в пикселях.
- auto: размер по содержимому.
Например, 1fr 200px 1fr создаёт три столбца: фиксированный центральный и два гибких боковых.
Интервалы строк и столбцов
Горизонтальное и вертикальное расстояние между ячейками можно настраивать отдельно.
Размещение объектов
По умолчанию объекты последовательно заполняют свободные ячейки по строкам. В свойствах дочернего объекта можно задать начальную строку и столбец, а также количество занимаемых ячеек.
Экспорт в 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 подходит для панелей мониторинга, галерей, форм и других двумерных структур.