> ## 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/uk/article/korisni-pidkazki-dlya-flex-block-vtrrg/).

**Зміст:**
* [Додавання Flex block](#1-dodavannya-flex-block)
* [Додавання елементів до Flex block](#1-dodavannya-elementiv-do-flex-block)
* [Керування розташуванням елементів один над одним (z-індекс)](#1-keruvannya-roztashuvannyam-elementiv-odin-nad-odnim-z-indeks)
* [Вирівнювання елементів у блоці](#1-virivnyuvannya-elementiv-u-bloci)
* [Зміна висоти блоку](#1-zmina-visoti-bloku)

# Додавання Flex block
1. Щоб додати Flex блок, наведіть на межу між двома блоками та натисніть на кнопку **Додати блок**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-1_1k7u5wv.png)

2. Відкрийте розділ **Порожні блоки** та оберіть **Flex block**:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-2_oe99i3.png)

# Додавання елементів до Flex block
У лівому верхньому куті флекс блоку натисніть на синю іконку з білим плюсиком та оберіть який елемент з абсолютним позиціонуванням ви бажаєте додати:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-3_gj6709.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/ukr-5_1014mmp.png)

# Керування розташуванням елементів один над одним (z-індекс)
Коли у Flex block декілька елементів, ви можете керувати тим, який елемент буде відображатися повністю, а який частково, у разі якщо ці елементи будуть перетинатися. Іншими словами, можна змінювати z-індекс елементів — те, який елемент буде на сторінці "ближче" до відвідувача сайту (**над** іншими елементами), а який "далі" (**під** іншими елементами).

1. Для зміни розташування елемента натисніть на три крапки у його лівому верхньому куті та у випадному меню оберіть необхідну вам опцію нижче у розділі **Розташування**. У наступному прикладі перше зображення розташовано під другим зображенням, проте шляхом натиску кнопки **На шар вище** ми можемо розмістити перше зображення над другим:
![](https://storage.crisp.chat/users/helpdesk/website/fa84b4d83a50e800/ukr-6_2igz44.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/ukr-8_mupal1.png)

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

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

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