Flex-лейаут

Режим Flex можно установить в разделе Авто-лейаут (Auto Layout), кликнув на иконку в настройке Отображение (Display).

Flex позволяет гибко управлять расположением дочерних элементов внутри родительского flex-контейнера. Он дает возможность выстраивать дочерние элементы в одном из направлений - в строку или в столбец, а также выравнивать относительно друг друга по горизонтали и по вертикали, определять перенос на другую строку и регулировать отступы между элементами.

Расположение дочерних элементов внутри контейнера осуществляется с помощью двух типов настроек:

Flex - применяется к родительскому элементу (flex-контейнеру) и позволяет настроить расположение его дочерних элементов

Лейуат дочернего элемента (Child Layout) - применяется к дочернему элементу и позволяет установить для него кастомные настройки расположения

Настройки Flex

Режим Flex устанавливается на родительском элементе, но при этом влияет на дочерние элементы.

Параметры:

1. Направление (Direction)

Расположение дочерних элементов внутри flex-контейнера — горизонтальное, вертикальное (и в обратном порядке). Направление определяет главную ось, по которой выравниваются дочерние элементы.

Строка (горизонтально)  — все элементы расположены в одну строку слева направо.

Колонка (вертикально) — все элементы расположены в один столбец сверху вниз.

Строка (горизонтально) в обратном порядке — все элементы расположены в одну строку справа налево.

Колонка (вертикально) в обратном порядке — все элементы расположены в один столбец снизу вверх.

2. Распределение (Justify)

Параметр определяет выравнивание дочерних элементов внутри flex-контейнера по главной оси. Если выбрано горизонтальное Направление (Direction) — это будет выравнивание элементов по горизонтальной оси. Если выбрано вертикальное Направление — выравнивание по вертикальной оси.

Start — элементы выровнены от начала оси.

Center — элементы центрируются.

End — элементы выровнены от конца оси.

Space between — элементы равномерно распределены по контейнеру; первый элемент находится в начале контейнера, последний - в конце.

Space around — элементы равномерно распределены по контейнеру с равным пространством вокруг них. Обратите внимание, что расстояния визуально не равны, поскольку все элементы имеют одинаковые отступы с обеих сторон.

Space evenly — элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) одинаково.

3. Выравнивание (Align)

Параметр определяет выравнивание дочерних элементов внутри flex-контейнера по перпендикулярной оси. Если выбрано горизонтальное Направление (Direction) — это будет выравнивание элементов по вертикальной оси. Если выбрано вертикальное Направление — выравнивание по горизонтальной оси.

Start — элементы выровнены от начала оси.

Center — элементы центрируются.

End — элементы выровнены от конца оси.

Stretch — элементы растягиваются по размеру родителя.

Baseline — элементы выровнены по своим базовым линиям (невидимая линия, на которой находится текст).

4. Перенос элементов на другую строку (Wrap)

Параметр позволяет включить перенос дочерних элементов flex-контейнера на следующие строки, если они не помещаются в одной строке. По умолчанию дочерние элементы будут располагаться на одной строке, при этом контейнер может переполняться. Параметр Wrap позволяет этого избежать.

5. Выравнивания нескольких строк содержимого по горизонтали и вертикали (Align Content)

Start — строки выровнены по верхней части или по левому краю flex-контейнера соответственно.

Center — строки центрируются по вертикали или горизонтали внутри flex-контейнера соответственно.

End — строки выровнены по низу или правому краю flex-контейнера соответственно.

Stretch — строки растягиваются, чтобы заполнить пустое вертикальное или горизонтальное пространство.

Space-between — строки или колонки равномерно распределены от верхнего до нижнего или от правого до левого края flex-контейнера соответственно.

Space-around — строки или колонки равномерно распределены между собой и краями flex-контейнера.

Space-evenly — промежутки между строками или колонками и от краев flex-контейнера до крайних элементов одинаковы.

6. Перенос элементов в обратном порядке (Wrap-reverse)

Порядок строк, по которым распределены все элементы во flex-контейнере, меняется на противоположный.

7. Расстояние между строками и столбцами

Свойство  Gap  задает отступы между столбцами и строками, а не вдоль края контейнера. Настройка отступов поможет сохранить пропорции внутри родительского элемента и выровнять контент относительно границ контейнера.

Например, можно расположить изображения по центру контейнера, задав нужный интервал.

Отступы между столбцами и строками также удобно использовать для виджетов, которые формируют списки:

Список (List);

Меню (Menu);

Вкладки (Tabs);

Аккордеон (Accordion).

Чтобы задать расстояние, выберите на Холсте или на вкладке Слои левой панели родительский элемент, в котором расположен нужный список.

Вы можете задать два типа расстояния:

Промежуток между рядами (Row gap)

Устанавливает расстояние между строками.

Промежуток между столбцами (Column gap)

Устанавливает расстояние между столбцами.

По умолчанию расстояние между колонками и столбцами установлено в значении «normal» — интервал будет зависеть от браузера. Вы можете задать расстояние в следующих единицах

Пиксели px

Проценты %

Интервал устанавливается в процентах относительно размера родительского элемента.

Em

Интервал определяется относительно размера шрифта родительского элемента. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта.

Rem

Интервал определяется относительно размера шрифта родительского элемента. 1rem равен размеру шрифта элемента в пикселях

Viewport Width vw

Размер интервала устанавливается в процентах от ширины окна браузера. 1vw равен 1% от текущей ширины окна браузера.

Viewport Height vh

Размер интервала устанавливается в процентах от высоты окна браузера. 1vh равен 1% от текущей высоты окна браузера.

Лейаут дочернего элемента (Child Layout)

Эти настройки устанавливаются на дочерние элементы и позволяют определять их поведение при изменении размеров родительского элемента, а также устанавливать для элемента кастомное выравнивание и порядок следования по отношению к другим дочерним элементам.

Параметры:

1. Размер (Sizing)

Параметр показывает, насколько элемент будет сжиматься (Shrink) или растягиваться(Grow) относительно соседних элементов при изменении размеров контейнера.

Значение Grow и Shrink может быть целым числом от 0 и больше.

Значение большее 1 — коэффициент, который показывает, во сколько раз элемент сжимается или растягивается относительно других элементов при изменении размеров контейнера. Например, если у первого элемента значение Grow — 2, у второго — 1, а у третьего — 0, то при увеличении контейнера третий элемент не увеличится в размерах, а первый и второй поделят между собой свободное место в контейнере пропорционально значениям Grow.

Также можно установить значение Базисного размера (Basis), которое определяет размер (в пикселях или в процентах), от которого элемент будет сжиматься или растягиваться. По умолчанию значение параметра автоматическое (auto).

2. Выравнивание (Align)

Позволяет позиционировать дочерний элемент по главной оси отдельно от остальных. Например: свойства вертикального flex-контейнера выравнивают все дочерние элементы по левому краю, но при использовании настройки Child Layout — Align выбранный элемент можно позиционировать по центру.

3. Порядок (Order)

Позволяет изменять порядковую позицию дочернего элемента во flex-контейнере: сделать первым, последним или настроить кастомный порядок.