Додавання Flex block для вільного розташування елементів
Flex block дозволяє розміщувати елементи довільним чином без обмежень накшталт колонок або сітки. Наприклад, ви можете розмістити 2 зображення так, щоб одне трохи перекривало інше, а також додати заголовок, кілька літер якого будуть над зображенням.
Елементи у Flex block мають абсолютне позиціонування, тобто таку властивість елемента, яка дозволяє його розмістити у будь-якому місці блоку, а не лише у межах передбаченої блоком структури.
Примітка: дізнайтеся про корисні лайфхаки та підказки по роботі із Flex block у цій статті.
Зміст:
Додавання Flex block
Додавання елементів до Flex block
Керування розташуванням елементів один над одним (z-індекс)
Вирівнювання елементів у блоці
Зміна висоти блоку
Щоб додати Flex блок, наведіть на межу між двома блоками та натисність на кнопку Додати блок:
Відкрийте розділ Порожні блоки та оберіть Flex block:
У лівому верхньому куті Flex block натисніть на синю іконку з білим плюсиком та оберіть який елемент з абсолютним позиціонуванням ви бажаєте додати:
Важливо: нині у Flex block доступні такі елементи: заголовок, текст, зображення та кнопка.
Після цього ви можете розташувати елементи довільним чином у межах цього блоку. Наприклад:
Підказка: якщо ви натисните на елемент, під ним ви побачите його розміри у пікселях.
Під час переміщення елементу ви можете бачити під ним 2 значення:
X — кількість пікселів від лівого краю блоку до елементу;
Y — кількість пікселів від верхнього краю блоку до елементу.
Ці значення допомогають з точністю до пікселя розуміти, де розміщено елемент та, наприклад, розміщувати інші елементи з врахуванням цього.
На цьому скриншоті під зображенням ви можете бачити його розміщення відносно лівого та верхнього краю блоку (стрілочки та синій текст домальовані на скриншоті для наочності):
Коли у Flex block декілька елементів, ви можете керувати тим, який елемент буде відображатися повністю, а який частково, у разі якщо ці елементи будуть перетинатися. Іншими словами, можна змінювати z-індекс елементів — те, який елемент буде на сторінці "ближче" до відвідувача сайту (над іншими елементами), а який "далі" (під іншими елементами).
Для зміни розташування елемента натисніть на три крапки у його лівому верхньому куті та у випадному меню оберіть необхідну вам опцію нижче у розділі Розташування. У наступному прикладі перше зображення розташовано під другим зображенням, проте шляхом натиску кнопки На шар вище ми можемо розмістити перше зображення над другим:
У розділі "Розташування" наявні 4 опції:
"На передній план" — розташувати на найвищому шарі у цьому блоці, тобто цей елемент буде перекривати усі інші;
"На шар вище" — елемент буде розміщено на 1 шар вище;
"На шар нижче" — елемент буде розміщено на 1 шар нижче;
"На задній план" — розташувати на найнижчому шарі, тобто цей елемент буде перекритий усіма іншими елементами у цьому блоці.
Примітка: якщо певні з цих кнопок відображені світло сірим кольором та недоступні, це означає, що цей елемент вже знаходиться на найнижчому або найвищому шарі в блоці.
Зверніть увагу: кожний елемент завжди знаходится на окремому шарі. Тобто на 1 шарі ніколи не буває 2 елементи.
Підказка: ви можете використовувати вказані у редакторі гарячі клавіші для керування розташуванням елементів.
У результаті друге зображення тепер розташоване під першим:
У випадному меню праворуч від слова "Розташування" ви можете побачити поточний z-індекс (z-index) елементу. Чим більше це значення, тим на вищому шарі розташовано цей елемент. Найнижче зображення з абсолютним позиціонуванням має z-індекс 1000.
Ви можете вирівняти елементи з абсолютним позиціюванням відносно блоку за 2 параметрами:
Горизонтально: за лівим краєм, по центру, за правим краєм;
Вертикально: за верхнім краєм, по центру, за нижнім краєм.
Наприклад, для того, щоб розмістити елемент у лівому нижньому куті блоку, вам необхідно у випадному меню у розділі Вирівнювання натиснути 2 кнопки: За лівим краєм та По нижньому краю. Тоді елемент буде розташовано наступним чином (пунктиром відображені границі блоку):
Ви можете встановити необхідну вам висоту Флекс блоку у його налаштуваннях. Для цього у правому верхньому куті блока натисніть на "шестерню" та вкажіть потрібне вам значення в пікселях у полі Висота блоку:
Елементи у Flex block мають абсолютне позиціонування, тобто таку властивість елемента, яка дозволяє його розмістити у будь-якому місці блоку, а не лише у межах передбаченої блоком структури.
Примітка: дізнайтеся про корисні лайфхаки та підказки по роботі із Flex block у цій статті.
Зміст:
Додавання Flex block
Додавання елементів до Flex block
Керування розташуванням елементів один над одним (z-індекс)
Вирівнювання елементів у блоці
Зміна висоти блоку
Додавання Flex block
Щоб додати Flex блок, наведіть на межу між двома блоками та натисність на кнопку Додати блок:
Відкрийте розділ Порожні блоки та оберіть Flex block:
Додавання елементів до Flex block
У лівому верхньому куті Flex block натисніть на синю іконку з білим плюсиком та оберіть який елемент з абсолютним позиціонуванням ви бажаєте додати:
Важливо: нині у Flex block доступні такі елементи: заголовок, текст, зображення та кнопка.
Після цього ви можете розташувати елементи довільним чином у межах цього блоку. Наприклад:
Підказка: якщо ви натисните на елемент, під ним ви побачите його розміри у пікселях.
Під час переміщення елементу ви можете бачити під ним 2 значення:
X — кількість пікселів від лівого краю блоку до елементу;
Y — кількість пікселів від верхнього краю блоку до елементу.
Ці значення допомогають з точністю до пікселя розуміти, де розміщено елемент та, наприклад, розміщувати інші елементи з врахуванням цього.
На цьому скриншоті під зображенням ви можете бачити його розміщення відносно лівого та верхнього краю блоку (стрілочки та синій текст домальовані на скриншоті для наочності):
Керування розташуванням елементів один над одним (z-індекс)
Коли у Flex block декілька елементів, ви можете керувати тим, який елемент буде відображатися повністю, а який частково, у разі якщо ці елементи будуть перетинатися. Іншими словами, можна змінювати z-індекс елементів — те, який елемент буде на сторінці "ближче" до відвідувача сайту (над іншими елементами), а який "далі" (під іншими елементами).
Для зміни розташування елемента натисніть на три крапки у його лівому верхньому куті та у випадному меню оберіть необхідну вам опцію нижче у розділі Розташування. У наступному прикладі перше зображення розташовано під другим зображенням, проте шляхом натиску кнопки На шар вище ми можемо розмістити перше зображення над другим:
У розділі "Розташування" наявні 4 опції:
"На передній план" — розташувати на найвищому шарі у цьому блоці, тобто цей елемент буде перекривати усі інші;
"На шар вище" — елемент буде розміщено на 1 шар вище;
"На шар нижче" — елемент буде розміщено на 1 шар нижче;
"На задній план" — розташувати на найнижчому шарі, тобто цей елемент буде перекритий усіма іншими елементами у цьому блоці.
Примітка: якщо певні з цих кнопок відображені світло сірим кольором та недоступні, це означає, що цей елемент вже знаходиться на найнижчому або найвищому шарі в блоці.
Зверніть увагу: кожний елемент завжди знаходится на окремому шарі. Тобто на 1 шарі ніколи не буває 2 елементи.
Підказка: ви можете використовувати вказані у редакторі гарячі клавіші для керування розташуванням елементів.
У результаті друге зображення тепер розташоване під першим:
У випадному меню праворуч від слова "Розташування" ви можете побачити поточний z-індекс (z-index) елементу. Чим більше це значення, тим на вищому шарі розташовано цей елемент. Найнижче зображення з абсолютним позиціонуванням має z-індекс 1000.
Вирівнювання елементів у блоці
Ви можете вирівняти елементи з абсолютним позиціюванням відносно блоку за 2 параметрами:
Горизонтально: за лівим краєм, по центру, за правим краєм;
Вертикально: за верхнім краєм, по центру, за нижнім краєм.
Наприклад, для того, щоб розмістити елемент у лівому нижньому куті блоку, вам необхідно у випадному меню у розділі Вирівнювання натиснути 2 кнопки: За лівим краєм та По нижньому краю. Тоді елемент буде розташовано наступним чином (пунктиром відображені границі блоку):
Зміна висоти блоку
Ви можете встановити необхідну вам висоту Флекс блоку у його налаштуваннях. Для цього у правому верхньому куті блока натисніть на "шестерню" та вкажіть потрібне вам значення в пікселях у полі Висота блоку:
Оновлено: 18/04/2024
Дякуємо!