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

Общие полезные подсказки

• Вы можете изменять размер изображения путем зажима левой клавиши мыши на границе элемента (чтобы вместо курсора появилась двусторонняя стрелочка) и перетаскиванием указателя мыши в центр изображения (для его уменьшения) или от центра (для его увеличения).
• Дважды щелкните на изображение, чтобы открыть его настройки.
• При перемещении элемента, от него к левому верхнему углу блока ведёт пунктирная линия, которая помогает понять, к какому блоку принадлежит выбранный элемент.
• После добавления элементов во Flex block необходимо открыть редактор мобильной и планшетной версии сайта и расположить также там элементы нужным вам образом.
• Абсолютное позиционирование элементов недоступно в блоках-коллекциях и еще в некоторых блоках.

Ниже рассмотрим дополнительные полезные опции и лайфхаки, которые могут пригодиться при работе с Flex block.

Перемещение элементов с абсолютным позиционированием с помощью клавиатуры

С помощью клавиатуры можно перемещать элементы во Flex block.

Достаточно выбрать элемент и использовать стрелочки на клавиатуре. Одно нажатие на стрелочку будет перемещать элемент на 1 пиксель в соответствующую сторону.

Более того, у вас есть возможность перемещать элементы с шагом в 10 пикселей, зажав клавишу Shift. Это позволяет быстро и эффективно перемещать элементы с точностью до одного пикселя.

Отображение расстояния между элементами во Flex block

• Вы можете отслеживать расстояние между абсолютными элементами во Flex block.

Для этого достаточно выделить один элемент и навести курсор на другой, до которого нужно увидеть расстояние:

• Отображение дистанции для элементов, расположенных по диагонали относительно друг друга, происходит по оси X и Y до угла необходимого элемента:

• Также есть возможность увидеть расстояние от края одного элемента до другого во время наложения. Для того, чтобы увидеть расстояние двух наложенных друг на друга элементов, необходимо зажать клавишу Alt (для Windows) или Option (для macOS):

• Кроме этого, вы можете увидеть расстояние от элемента до границ блока, кликнув на элемент и зажав соответствующую клавишу:

Перемещение элементов во Flex block только по 1 оси (X или Y)

Перед перемещением элемента с помощью курсора мыши вы можете зажать клавишу Shift, чтобы зафиксировать его расположение по оси X или Y.

Это позволяет удобнее управлять частями вашего сайта. Например, если вам нужно сдвинуть изображение только влево или вправо, то благодаря этому функционалу вы сможете избежать случайного смещения элемента по вертикали или по горизонтали.

Дублирование элементов с помощью клавиши Alt (Option)

У вас есть возможность дублировать элементы, зажимая клавишу Alt (для Windows) или Option (для macOS).

Для этого достаточно зажать соответствующую клавишу и начать перемещать выбранный элемент:

После выполнения этого действия автоматически создается копия выбранного объекта и вы можете сразу разместить его где-нибудь в блоке.

Управление несколькими элементами во Flex block одновременно

Вы можете выделить несколько элементов мышкой или последовательно щелкнуть левой кнопкой мыши на элементы, зажав клавишу Shift:

Таким образом, вы сможете одновременно перемещать, дублировать и удалять несколько элементов в блоке, а также выравнивать контент внутри выделенной группы элементов.

Изменение размера сразу нескольких элементов

Также можно изменять размер сразу нескольких элементов во Flex block — с помощью выделения группы элементов вы можете одновременно изменить размер каждого из них.

Во время группового увеличения или уменьшения изображения изменение размера будет происходить в соответствии с заданными настройками — например, если в настройках изображения включен переключатель Масштабировать, то это изображение будет изменять размер пропорционально, и наоборот, если переключатель Масштабировать был бы выключен.

Последнее изменение: 12/02/2024