36a3257d29
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
84 lines
6.2 KiB
Markdown
84 lines
6.2 KiB
Markdown
---
|
||
title: Авто-раскладка
|
||
description: Авто-раскладка на основе flexbox в OpenPencil — направление, отступы, выравнивание и размеры дочерних элементов.
|
||
---
|
||
|
||
# Авто-раскладка
|
||
|
||
Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма по правилам flexbox. Она управляет направлением, отступами, выравниванием и адаптивными размерами.
|
||
|
||
## Включение авто-раскладки
|
||
|
||
- Выделите фрейм и нажмите <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> |
|
||
|
||
## Советы
|
||
|
||
- Авто-раскладка пересчитывается сразу после создания, поэтому границы выделения обновляются немедленно.
|
||
- Вкладывайте фреймы с авто-раскладкой для создания сложных адаптивных макетов (например, вертикальный фрейм, содержащий горизонтальные строки).
|
||
- Используйте размер «Заполнить», чтобы элемент занял оставшееся пространство, аналогично flex-grow: 1 в CSS.
|
||
- См. [Рисование фигур](./drawing-shapes) для создания фреймов, к которым применяется авто-раскладка.
|
||
- См. [Компоненты](./components) для использования авто-раскладки внутри переиспользуемых компонентов.
|