> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Добавление Flex block для произвольного расположения элементов

Flex block позволяет размещать элементы произвольным образом без таких ограничений, как колонки или сетки. Например, вы можете разместить 2 изображения так, чтобы одно чуть-чуть перекрывало другое, а также добавить заголовок, несколько букв которого будут над изображением.

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

${youtube}[Видео про работу с Flex block (на украинском языке)](A6T5oxKdg68)

|| ${color}[#FFA800](Примечание:) узнайте о полезных лайфхаках и подсказках по работе с Flex block в [этой статье](https://help.weblium.com/ru/article/poleznye-podskazki-dlya-flex-block-1tt33p1/).

**Содержание:**
* [Добавление Flex block](#1-dobavlenie-flex-block)
* [Добавление элементов к Flex block](#1-dobavlenie-elementov-k-flex-block)
* [Управление расположением элементов друг над другом (z-индекс)](#1-upravlenie-raspolozheniem-elementov-drug-nad-drugom-z-indeks)
* [Выравнивание элементов в блоке](#1-vyravnivanie-elementov-v-bloke)
* [Изменение высоты блока](#1-izmenenie-vysoty-bloka)

# Добавление Flex block
1. Чтобы добавить Flex блок, наведите на границу между двумя блоками и нажмите кнопку **Добавить блок**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-1_ie2ev9.png)

2. Откройте раздел **Пустые блоки** и выберите **Flex block**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-2_7uvy45.png)

# Добавление элементов к Flex block
В левом верхнем углу Flex block нажмите на синюю иконку с белым плюсиком и выберите какой элемент с абсолютным позиционированием вы хотите добавить:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-3_1t8sre3.png)
||| ${color}[#f97700](Важно:) в настоящее время в Flex block доступны следующие элементы: Заголовок, Текст, Изображение, Кнопка, Вверх по странице, Закрепленная кнопка, Фигура, Hover-эффект, Видео, Вертикальная форма, Горизонтальное и Вертикальное меню, Иконки соцсетей, Разделитель, Встроенный код, Товар.

После этого вы можете разместить элементы произвольным образом в пределах этого блока. Например:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-4_1o0gnnb.png)

| ${color}[#1aa900](Подсказка:) если вы нажмете на элемент, под ним вы увидите его размеры в пикселях.

При перемещении элемента вы можете видеть под ним 2 значения:
1. **X** — количество пикселей от левого края блока до элемента;
2. **Y** — количество пикселей от верхнего края блока до элемента.
Эти значения помогают с точностью до пикселя понимать, где находится элемент и, например, размещать другие элементы с учётом этого.

На этом скриншоте под изображением можно увидеть его расположение относительно левого и верхнего края блока (стрелочки и синий текст дорисованы на скриншоте для наглядности):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-5_1et1otr.png)

# Управление расположением элементов друг над другом (z-индекс)
Когда в Flex block несколько элементов, вы можете управлять тем, какой элемент будет отображаться полностью, а какой частично, если эти элементы будут пересекаться. Иными словами, можно изменять z-индекс элементов – то, какой элемент будет на странице "ближе" к посетителю сайта (**над** другими элементами), а какой "дальше" (**под** другими элементами).

1. Для изменения расположения элемента нажмите на три точки в его левом верхнем углу и в выпадающем меню выберите необходимую вам опцию ниже в разделе **Расположение**. В следующем примере первое изображение находится под вторым изображением, однако путём нажатия кнопки **На слой выше** мы можем разместить первое изображение над вторым:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-6_10ih9q7.png)

В разделе "Расположение" доступны 4 опции:
* "На передний план" — расположить на самом высоком слое в этом блоке, то есть этот элемент будет перекрывать все остальные;
* "На слой выше" — элемент будет размещен на 1 слой выше;
* "На слой ниже" — элемент будет размещен на 1 слой ниже;
* "На задний план" — расположить на самом нижнем слое, то есть этот элемент будет перекрыт всеми остальными элементами в этом блоке.

|| ${color}[#ffa800](Примечание:) если некие из этих кнопок отображаются светло-серым цветом и недоступны, это означает, что этот элемент уже находится на самом низшем или наивысшем слое в блоке.
|| ${color}[#ffa800](Обратите внимание:) каждый элемент всегда находится на отдельном слое. То есть на 1 слое никогда не бывает 2 элемента.
| ${color}[#1aa900](Подсказка:) можно использовать указанные в редакторе горячие клавиши для управления расположением элементов.

2. В результате второе изображение теперь расположено **под** первым:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-7_1tvlatp.png)

3. В выпадающем меню справа от слова "Расположение" вы можете увидеть текущий z-индекс (z-index) элемента. Чем больше это значение, тем на более высшем слое расположен этот элемент. Самое низшее изображение в блоке имеет z-индекс `1000`.
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-8_je4mq8.png)

# Выравнивание элементов в блоке
Вы можете выровнять элементы с абсолютным позиционированием относительно блока по 2 параметрам:
* **Горизонтально:** за левым краем, по центру, за правым краем;
* **Вертикально:** за верхним краем, по центру, за нижним краем.

Например, для того, чтобы разместить элемент в левом нижнем углу блока, вам необходимо в выпадающем меню в разделе **Выравнивание** нажать 2 кнопки: **По левому краю** и **По нижнему краю**. Тогда элемент будет расположен следующим образом (пунктиром отображены границы блока):
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-9_64v8ad.png)

# Изменение высоты блока
Вы можете установить необходимую высоту Флекс блока в его настройках. Для этого в правом верхнем углу блока нажмите **"шестерню"** и укажите нужное значение в пикселях в поле **Высота блока**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ros-10_958jrl.png)