---
title: Автоматическая компоновка
description: "Flexbox и CSS Grid в OpenPencil: направление, интервалы, отступы, выравнивание и размеры дочерних объектов."
---

# Автоматическая компоновка

Автоматическая компоновка размещает дочерние объекты внутри фрейма. Доступны два режима: **Flex** с горизонтальным или вертикальным потоком и **Grid** со строками, столбцами и настраиваемыми дорожками.

## Включение

- Выделите фрейм и нажмите <kbd>⇧</kbd><kbd>A</kbd>, чтобы включить или отключить автоматическую компоновку.
- Выделите несколько отдельных объектов и нажмите <kbd>⇧</kbd><kbd>A</kbd>, чтобы поместить их в новый фрейм.

При создании фрейма OpenPencil сначала сортирует объекты по их видимому положению.

## Направление

- **Горизонтальное:** объекты располагаются слева направо.
- **Вертикальное:** объекты располагаются сверху вниз.
- **Перенос:** при нехватке места объекты переходят на следующую строку или в следующий столбец.

## Расстояния

### Интервал

Интервал определяет расстояние между соседними дочерними объектами.

### Внутренние отступы

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

## Выравнивание

### Основная ось

- **Начало:** объекты располагаются у начала оси.
- **Центр:** объекты выравниваются по центру.
- **Конец:** объекты располагаются у конца оси.
- **Распределить:** свободное место равномерно распределяется между объектами.

### Поперечная ось

- **Начало:** выравнивание по началу поперечной оси.
- **Центр:** выравнивание по центру.
- **Конец:** выравнивание по концу оси.
- **Растянуть:** дочерние объекты занимают всю поперечную ось.

## Размер дочерних объектов

- **Фиксированный:** использовать явно заданную ширину или высоту.
- **Заполнить:** занять доступное место.
- **По содержимому:** подобрать размер по содержимому.

Первое фактическое изменение ширины или высоты переводит только эту ось из режима «Заполнить» или «По содержимому» в фиксированный режим. Простое получение фокуса полем не меняет режим размера.

## Изменение порядка

Перетащите дочерний объект внутри фрейма, чтобы изменить его место среди соседних. Индикатор покажет новую позицию.

## Сочетание клавиш

| Действие | macOS | Windows / Linux |
|----------|-------|-----------------|
| Включить или отключить компоновку | <kbd>⇧</kbd><kbd>A</kbd> | <kbd>Shift</kbd><kbd>A</kbd> |

## 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 подходит для панелей мониторинга, галерей, форм и других двумерных структур.