Авто-расположение (в режиме Flex)
Режим Flex, устанавливаемый в параметрах Настройки отображения (Display) позволяет гибко управлять расположением дочерних элементов внутри родительского flex-контейнера. Он дает возможность выстраивать дочерние элементы в строку или в столбец, выравнивать относительно друг друга по горизонтали и по вертикали, определять перенос на другую строку и регулировать отступы между элементами.
Расположение дочерних элементов внутри контейнера осуществляется с помощью двух типов настроек:
- Авто-расположение (Auto Layout) - применяется к родительскому элементу (flex-контейнеру) и позволяет настроить расположение его дочерних элементов
- Расположение дочернего элемента (Child Layout) - применяется к дочернему элементу и позволяет установить для него кастомные настройки расположения
Авто-расположение устанавливается на родительском элементе, но при этом влияет на дочерние элементы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/gLhR23S0GGxBcyguaexjO_izobrazhenie.png?format=webp)
Параметры Авто-расположения:
Расположение дочерних элементов внутри flex-контейнера — горизонтальное, вертикальное (и в обратном порядке). Направление определяет главную ось, по которой выравниваются дочерние элементы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/_hcY4yJVv1nrUtaJZ3aHE_izobrazhenie.png?format=webp)
- Строка (горизонтально) — все элементы расположены в одну строку слева направо.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Bjy-JQmPhGlzM4oWXuDbO_izobrazhenie.png?format=webp)
- Колонка (вертикально) — все элементы расположены в один столбец сверху вниз.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/LmlxvaBVgKgvHC_qbwz2-_izobrazhenie.png?format=webp)
- Строка (горизонтально) в обратном порядке — все элементы расположены в одну строку справа налево.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/xQp2Xmb49460cQkotJUco_izobrazhenie.png?format=webp)
- Колонка (вертикально) в обратном порядке — все элементы расположены в один столбец снизу вверх.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/UmyStF-47wEXFlwXqDX_s_izobrazhenie.png?format=webp)
Параметр определяет выравнивание дочерних элементов внутри flex-контейнера по главной оси. Если выбрано горизонтальное Направление (Direction) — это будет выравнивание элементов по горизонтальной оси. Если выбрано вертикальное Направление — выравнивание по вертикальной оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/p3kbmneGHFPbs7byNX_q2_izobrazhenie.png?format=webp)
- Start — элементы выровнены от начала оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/wQ07IrX9mkIhp9oChxhqg_izobrazhenie.png?format=webp)
- Center — элементы центрируются.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/bpswkB_jE5GsOQGIQRJCz_izobrazhenie.png?format=webp)
- End — элементы выровнены от конца оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Dkrt-F9h_J65vS7XgUo4p_izobrazhenie.png?format=webp)
- Space between — элементы равномерно распределены по контейнеру; первый элемент находится в начале контейнера, последний - в конце.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/yoqfb9qd34epLM8DQVgBD_izobrazhenie.png?format=webp)
- Space around — элементы равномерно распределены по контейнеру с равным пространством вокруг них. Обратите внимание, что расстояния визуально не равны, поскольку все элементы имеют одинаковые отступы с обеих сторон.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/RjdukKqL2zKiMW8ZMtfl1_izobrazhenie.png?format=webp)
- Space evenly — элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) одинаково.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/hRTgOJ5ccYyWYyDHZ9TcZ_izobrazhenie.png?format=webp)
Параметр определяет выравнивание дочерних элементов внутри flex-контейнера по перпендикулярной оси. Если выбрано горизонтальное Направление (Direction) — это будет выравнивание элементов по вертикальной оси. Если выбрано вертикальное Направление — выравнивание по горизонтальной оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/DtO4TGSlSj-lgdJZzzDJL_izobrazhenie.png?format=webp)
- Start — элементы выровнены от начала оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/bZFFSTE7qihBwMAUfRgSk_izobrazhenie.png?format=webp)
- Center — элементы центрируются.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/SNFDDRYIB-xPy2v7HeBYR_izobrazhenie.png?format=webp)
- End — элементы выровнены от конца оси.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/czBRmZMdmZbuaSmZfig3S_izobrazhenie.png?format=webp)
- Stretch — элементы растягиваются по размеру родителя.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/dbnMz59ABEH0KrGIFNIIf_izobrazhenie.png?format=webp)
- Baseline — элементы выровнены по своим базовым линиям (невидимая линия, на которой находится текст).
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/y0EDdIBQoy7prO0l45YN-_izobrazhenie.png?format=webp)
Параметр позволяет включить перенос дочерних элементов flex-контейнера на следующие строки, если они не помещаются в одной строке. По умолчанию дочерние элементы будут располагаться на одной строке, при этом контейнер может переполняться. Параметр Wrap позволяет этого избежать.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/5L4-Xa5cVnMDyVtbWMKIs_group-11.png?format=webp)
![Nowrap Nowrap](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/VXjh5G8QPITc9Qhp5bfA7_izobrazhenie.png?format=webp)
![Wrap Wrap](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/lAJ7gXFrSvS466aPttDD5_izobrazhenie.png?format=webp)
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/3w4YwloqiFR3x60NX6qoK_group-12.png?format=webp)
- Start — строки выровнены по верхней части или по левому краю flex-контейнера соответственно.
- Center — строки центрируются по вертикали или горизонтали внутри flex-контейнера соответственно.
- End — строки выровнены по низу или правому краю flex-контейнера соответственно.
- Stretch — строки растягиваются, чтобы заполнить пустое вертикальное или горизонтальное пространство.
- Space-between — строки или колонки равномерно распределены от верхнего до нижнего или от правого до левого края flex-контейнера соответственно.
- Space-around — строки или колонки равномерно распределены между собой и краями flex-контейнера.
- Space-evenly — промежутки между строками или колонками и от краев flex-контейнера до крайних элементов одинаковы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/doL7c-0znPxbAVaxrRoCb_frame-49.png?format=webp)
Порядок строк, по которым распределены все элементы во flex-контейнере, меняется на противоположный.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/7lcSEL5FUgUAl0MteRbiB_group-121.png?format=webp)
Свойство Gap задает отступы между столбцами и строками, а не вдоль края контейнера. Настройка отступов поможет сохранить пропорции внутри родительского элемента и выровнять контент относительно границ контейнера.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/woBB8FFv4BlNqrE6aOlNL_image.png?format=webp)
Например, можно расположить изображения по центру контейнера, задав нужный интервал.
![Не задано свойство Gap Не задано свойство Gap](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/nA01vHd2Hl9Iy09VjLabF_screenshot-2023-05-31-at-174615.png?format=webp)
![Gap: равное расстояние между столбцами и строками Gap: равное расстояние между столбцами и строками](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/20g9CdzQtfqMc7FE-5tVu_screenshot-2023-05-31-at-174545.png?format=webp)
Отступы между столбцами и строками также удобно использовать для виджетов, которые формируют списки:
Свойство Gap не работает для виджета Блоклист (Block List)
Чтобы задать расстояние, выберите на Холсте или на вкладке Слои левой панели родительский элемент, в котором расположен нужный список.
Вы можете задать два типа расстояния:
- Промежуток между рядами
Устанавливает расстояние между строками.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/VEv9xLNy64slPTVRSNFjP_screenshot-2023-05-31-at-115939.png?format=webp)
- Промежуток между столбцами
Устанавливает расстояние между столбцами.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/1q_6L-j3FkF7rZyAmE2G8_screenshot-2023-05-31-at-120038.png?format=webp)
По умолчанию расстояние между колонками и столбцами установлено в значении «normal» — интервал будет зависеть от браузера. Вы можете задать расстояние в следующих единицах:
- Пиксели px
- Проценты %
Интервал устанавливается в процентах относительно размера родительского элемента.
- Em
Интервал определяется относительно размера шрифта родительского элемента. 1em равен размеру шрифта элемента в пикселях. Размер меняется пропорционально изменениям размера шрифта.
- Rem
Интервал определяется относительно размера шрифта родительского элемента. 1rem равен размеру шрифта элемента в пикселях
- Viewport Width vw
Размер интервала устанавливается в процентах от ширины окна браузера. 1vw равен 1% от текущей ширины окна браузера.
- Viewport Height vh
Размер интервала устанавливается в процентах от высоты окна браузера. 1vh равен 1% от текущей высоты окна браузера.
Чтобы настроить пропорциональные промежутки, нажмите на кнопку с изображением скрепки. Это нужно для ускорения работы над проектом. После нажатия «скрепки», настройте один из параметров — промежуток между рядами или столбцами. Второй установится автоматически.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Xbz1zCj0Um_B9BeQecj1u_image.png?format=webp)
При обновлении страницы, настройка сбросится. Однако, это повлияет только на процесс работы в Редакторе дизайна. Изменения не затронут сам проект.
Эти настройки устанавливаются на дочерние элементы и позволяют определять их поведение при изменении размеров родительского элемента, а также устанавливать для элемента кастомное выравнивание и порядок следования по отношению к другим дочерним элементам.
Параметры Расположения дочернего элемента:
Параметр показывает, насколько элемент будет сжиматься (Shrink) или растягиваться (Grow) относительно соседних элементов при изменении размеров контейнера.
- Значение Grow и Shrink может быть целым числом от 0 и больше.
- Значение большее 1 — коэффициент, который показывает, во сколько раз элемент сжимается или растягивается относительно других элементов при изменении размеров контейнера. Например, если у первого элемента значение Grow — 2, у второго — 1, а у третьего — 0, то при увеличении контейнера третий элемент не увеличится в размерах, а первый и второй поделят между собой свободное место в контейнере пропорционально значениям Grow.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/GpDhhtnWIiys33ShL7eBS_izobrazhenie.png?format=webp)
Также можно установить значение Базисного размера (Basis), которое определяет размер (в пикселях или в процентах), от которого элемент будет сжиматься или растягиваться. По умолчанию значение параметра автоматическое (auto).
Позволяет позиционировать дочерний элемент по главной оси отдельно от остальных. Например: свойства вертикального flex-контейнера выравнивают все дочерние элементы по левому краю, но при использовании настройки Child Layout — Align выбранный элемент можно позиционировать по центру.
Позволяет изменять порядковую позицию дочернего элемента во flex-контейнере: сделать первым, последним или настроить кастомный порядок.