Макет и позиционирование
Конструктор флоу создаёт адаптивные макеты. Здесь вы не перетаскиваете элементы на точные координаты — вместо этого вы вкладываете их в контейнеры, которые автоматически выстраивают дочерние элементы.
Контейнер определяет направление элементов (вертикальное или горизонтальное), их выравнивание и отступы. Отдельные элементы могут дополнительно настраивать свои размеры и отступы или — при необходимости — выходить из потока с помощью абсолютного или фиксированного позиционирования.
О визуальных свойствах — заливке, рамках и эффектах — читайте в разделе Стили и оформление.
Компоновка
Компоновка — это основной инструмент для расположения элементов на экране. Каждый контейнер автоматически распределяет дочерние элементы по заданным правилам — направлению, выравниванию и отступам. Доступные в конструкторе элементы компоновки:
- Вертикальный контейнер: Размещает дочерние элементы сверху вниз
- Горизонтальный контейнер: Размещает дочерние элементы слева направо
- Разделитель: Визуальный разделитель между элементами
- Карусель: Горизонтально прокручиваемый набор слайдов
- Bottom Sheet: Выдвигающаяся панель, которая показывает дополнительный контент при нажатии кнопки Контейнеры — это основные строительные блоки экрана. Вы можете вкладывать их друг в друга, чтобы создавать сложные макеты. У каждого контейнера есть раздел Layout на правой панели, который управляет расположением дочерних элементов.
Чтобы сгруппировать элементы в новый контейнер, используйте действие слоя Wrap layer action. Чтобы убрать контейнер и поднять его дочерние элементы на уровень выше, используйте Unwrap.
Подробнее об иерархии экранов и слоёв — в разделе Экраны и слои.
Direction
- Free: Без автоматического расположения. Дочерние элементы позиционируются независимо (полезно, когда дочерние элементы используют абсолютное позиционирование)
- Vertical: Дочерние элементы выстраиваются сверху вниз, как строки в столбце
- Horizontal: Дочерние элементы располагаются слева направо, как элементы в строке
Порядок элементов
Дочерние элементы отображаются в том порядке, в каком они расположены на панели Layers. В вертикальном контейнере верхний элемент списка оказывается в верхней части экрана, в горизонтальном — в левой. Перетаскивайте элементы на панели Layers для изменения порядка или используйте Move Up и Move Down в действиях слоя.
Выравнивание
Сетка выравнивания определяет, как дочерние элементы располагаются вдоль поперечной оси контейнера. В вертикальном контейнере выравнивание задаёт горизонтальное положение дочерних элементов (по левому краю, по центру или по правому краю). В горизонтальном — вертикальное (по верхнему краю, по середине или по нижнему краю).
Распределение
Распределение определяет, как пространство делится между дочерними элементами вдоль главной оси:
- Gap (по умолчанию): фиксированное расстояние в пикселях между соседними дочерними элементами
- Space Between: дочерние элементы распределяются до краёв, а между ними появляются равные промежутки
- Space Around: каждый дочерний элемент окружён равными промежутками, при этом у краёв промежутки вдвое меньше
- Space Evenly: равные промежутки перед всеми дочерними элементами, между ними и после них
Обрезка контента
Визуально скрывает контент, выходящий за границы контейнера. Отключите эту опцию, если нужно разрешить переполнение — например, для бейджа, который намеренно выступает за край карточки.
Позиция
По умолчанию позиция каждого элемента определяется автоматически на основе лейаута контейнера. Переключатель Position позволяет вывести элемент из обычного потока и задать его положение вручную.
Относительное (по умолчанию)
Элемент остаётся в обычном потоке разметки. Его положение определяется правилами родительского контейнера — свободно перетаскивать его нельзя. Используйте Margin для настройки отступов вокруг относительного элемента.
Относительное позиционирование подходит для большинства элементов контента: текстовых блоков, изображений, карточек, кнопок и элементов списков.
Абсолютное позиционирование
Элемент выходит из обычного потока и накладывается поверх другого контента. Он больше не влияет на расположение соседних элементов.
При выборе Absolute появляются дополнительные настройки:
- Поля смещения (T, L, R, B): задают расстояние в пикселях от элемента до каждого края родительского контейнера
- Сетка привязки: нажмите на точку сетки 3×3, чтобы выбрать угол, край или центр родительского элемента, к которому будет привязан элемент
- Горизонтальная привязка (Left / Center / Right) и Вертикальная привязка (Top / Center / Bottom): выпадающие списки, которые управляют той же точкой привязки, что и сетка
- Z-index: числовое поле, которое определяет порядок наложения элемента относительно соседних. Элементы с большим значением отображаются поверх остальных Используйте абсолютное позиционирование для декоративных наложений, значков, кнопок закрытия и иконок, размещённых поверх изображений.
Чтобы растянуть абсолютный элемент на всю ширину родителя, установите горизонтальный якорь на Left, затем добавьте смещение Right равное 0. Элемент прикрепится к обоим краям.
Фиксированный
Элемент полностью игнорирует родительский контейнер и прикрепляется к экрану. Он остаётся видимым при прокрутке — контент страницы движется под ним. Фиксированное позиционирование использует те же элементы управления, что и Absolute (отступы, сетка привязки, Z-index). Все отступы отсчитываются относительно безопасной области экрана, а не родительского элемента. Например, отступ 0 от нижнего края удерживает элемент выше индикатора Home. Чтобы отсчитывать отступы от физических краёв экрана, включите Ignore safe area. Используйте фиксированное позиционирование для элементов, которые должны перекрывать прокручиваемый контент, а не резервировать под него место — плавающие кнопки закрытия или восстановления, постоянные верхние баннеры, кнопки прокрутки вверх и навигационные панели. Для выделенной нижней зоны действий используйте Footer.
Игнорирование безопасной зоны
Безопасная зона — это часть экрана, свободная от выреза камеры, строки состояния и индикатора возврата домой. По умолчанию позиционируемые элементы остаются внутри неё.
Установите флажок Ignore safe area под селектором типа позиции, чтобы отступы элемента отсчитывались от физических краёв экрана. Тогда элемент сможет заходить за вырез камеры и индикатор возврата домой.
Для полноэкранного медиа: установите позиционирование Fixed, задайте все четыре отступа равными 0 и выберите Ignore safe area. Медиа займёт весь экран от края до края.
Флажок работает только для абсолютного и фиксированного позиционирования. Для относительных элементов он недоступен, а при переключении обратно в Relative настройка сбрасывается.
Размер
У каждого элемента есть элементы управления Width и Height. Нажмите на выпадающий список, чтобы выбрать режим задания размера:
- Fill: Элемент растягивается, занимая всё доступное пространство родителя. Показанное значение в пикселях — это вычисленный результат.
- Hug: Элемент сжимается, подстраиваясь под размер содержимого. Показанное значение в пикселях — это вычисленный результат.
- Fixed: Элемент использует точное значение в пикселях, которое вы задаёте, независимо от размера родителя или содержимого. Единственный доступный режим для элементов с абсолютным или фиксированным позиционированием.
Отступы
Задайте значения отступов отдельно для каждой стороны элемента.
- Margin: Пространство между элементом и соседними элементами. Не выходит за границы родительского контейнера, какое бы значение ни было задано.
- Padding: Пространство между границей элемента и его содержимым.
У текстовых элементов есть только margin. У экранов — только padding. Для контейнеров и других элементов с дочерним содержимым доступны оба варианта.
Порядок наложения
Относительные элементы никогда не перекрывают друг друга — каждый контейнер выстраивает дочерние элементы последовательно. Перекрытие возникает только тогда, когда элемент выходит из обычного потока с помощью позиционирования Absolute или Fixed.
Когда элементы всё же перекрываются, последующие сиблинги на панели Layers отображаются поверх предыдущих — даже если последующий сиблинг относительный, а предыдущий абсолютный. Absolute и Fixed элементы получают поле Z-index для более точного управления: чем выше значение, тем выше приоритет. У Relative элементов Z-index отсутствует — порядок в стеке определяется только их позицией в списке слоёв.
Чтобы изменить порядок элементов, используйте действия со слоями Move up и Move down.