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

Елементи у Flex block мають абсолютне позиціонування, тобто таку властивість елемента, яка дозволяє його розмістити у будь-якому місці блоку, а не лише у межах передбаченої блоком структури.

Зміст:

• Додавання Flex block
• Додавання елементів до Flex block
• Керування розташуванням елементів один над одним (z-індекс)
• Вирівнювання елементів у блоці
• Зміна висоти блоку

Додавання Flex block

1. Щоб додати Flex блок, наведіть на межу між двома блоками та натисніть на кнопку Додати блок:

2. Відкрийте розділ Порожні блоки та оберіть Flex block:

Додавання елементів до Flex block

У лівому верхньому куті флекс блоку натисніть на синю іконку з білим плюсиком та оберіть який елемент з абсолютним позиціонуванням ви бажаєте додати:

Після цього ви можете розташувати елементи довільним чином у межах цього блоку. Наприклад:

Під час переміщення елементу ви можете бачити під ним 2 значення:

1. X — кількість пікселів від лівого краю блоку до елементу;
2. Y — кількість пікселів від верхнього краю блоку до елементу.

Ці значення допомогають з точністю до пікселя розуміти, де розміщено елемент та, наприклад, розміщувати інші елементи з врахуванням цього.

На цьому скриншоті під зображенням ви можете бачити його розміщення відносно лівого та верхнього краю блоку (стрілочки та синій текст домальовані на скриншоті для наочності):

Керування розташуванням елементів один над одним (z-індекс)

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

1. Для зміни розташування елемента натисніть на три крапки у його лівому верхньому куті та у випадному меню оберіть необхідну вам опцію нижче у розділі Розташування. У наступному прикладі перше зображення розташовано під другим зображенням, проте шляхом натиску кнопки На шар вище ми можемо розмістити перше зображення над другим:

У розділі "Розташування" наявні 4 опції:

• "На передній план" — розташувати на найвищому шарі у цьому блоці, тобто цей елемент буде перекривати усі інші;
• "На шар вище" — елемент буде розміщено на 1 шар вище;
• "На шар нижче" — елемент буде розміщено на 1 шар нижче;
• "На задній план" — розташувати на найнижчому шарі, тобто цей елемент буде перекритий усіма іншими елементами у цьому блоці.

2. У результаті друге зображення тепер розташоване під першим:

3. У випадному меню праворуч від слова "Розташування" ви можете побачити поточний z-індекс (z-index) елементу. Чим більше це значення, тим на вищому шарі розташовано цей елемент. Найнижче зображення з абсолютним позиціонуванням має z-індекс 1000.

Вирівнювання елементів у блоці

Ви можете вирівняти елементи з абсолютним позиціюванням відносно блоку за 2 параметрами:

• Горизонтально: за лівим краєм, по центру, за правим краєм;
• Вертикально: за верхнім краєм, по центру, за нижнім краєм.

Наприклад, для того, щоб розмістити елемент у лівому нижньому куті блоку, вам необхідно у випадному меню у розділі Вирівнювання натиснути 2 кнопки: За лівим краєм та По нижньому краю. Тоді елемент буде розташовано наступним чином (пунктиром відображені границі блоку):

Зміна висоти блоку

Ви можете встановити необхідну вам висоту Флекс блоку у його налаштуваннях. Для цього у правому верхньому куті блока натисніть на "шестерню" та вкажіть потрібне вам значення в пікселях у полі Висота блоку:

Оновлено: 13/11/2025