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

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

Содержание:

• Добавление Flex block
• Добавление элементов к Flex block
• Управление расположением элементов друг над другом (z-индекс)
• Выравнивание элементов в блоке
• Изменение высоты блока

Добавление Flex block

1. Чтобы добавить Flex блок, наведите на границу между двумя блоками и нажмите кнопку Добавить блок:

2. Откройте раздел Пустые блоки и выберите Flex block:

Добавление элементов к 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