---
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) для использования авто-раскладки внутри переиспользуемых компонентов.