Добавление 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
Спасибо!