Полезные подсказки для Flex block
В этой статье мы рассмотрим определённые удобные опции, которыми можно пользоваться для экономии времени и общего удобства при работе с Flex block.
Подсказка: ряд из этих рекомендаций также может быть применён при использовании элементов с абсолютным позиционированием в обычных блоках.
Вы можете изменять размер изображения путем зажима левой клавиши мыши на границе элемента (чтобы вместо курсора появилась двусторонняя стрелочка) и перетаскиванием указателя мыши в центр изображения (для его уменьшения) или от центра (для его увеличения).
Дважды щелкните на изображение, чтобы открыть его настройки.
При перемещении элемента, от него к левому верхнему углу блока ведёт пунктирная линия, которая помогает понять, к какому блоку принадлежит выбранный элемент.
После добавления элементов во Flex block необходимо открыть редактор мобильной и планшетной версии сайта и расположить также там элементы нужным вам образом.
Абсолютное позиционирование элементов недоступно в блоках-коллекциях и еще в некоторых блоках.
Ниже рассмотрим дополнительные полезные опции и лайфхаки, которые могут пригодиться при работе с Flex block.
С помощью клавиатуры можно перемещать элементы во Flex block.
Достаточно выбрать элемент и использовать стрелочки на клавиатуре. Одно нажатие на стрелочку будет перемещать элемент на 1 пиксель в соответствующую сторону.
Более того, у вас есть возможность перемещать элементы с шагом в 10 пикселей, зажав клавишу Shift. Это позволяет быстро и эффективно перемещать элементы с точностью до одного пикселя.
Подсказка: при перемещении элементов с помощью стрелочек на клавиатуре, притяжение не осуществляется — это удобно, когда вам необходимо разместить элемент на расстоянии менее 5 пикселей от объекта, к которому происходит притяжение.
Вы можете отслеживать расстояние между абсолютными элементами во Flex block.
Для этого достаточно выделить один элемент и навести курсор на другой, до которого нужно увидеть расстояние:
Примечание: расстояние может отображаться по осям X и Y (по горизонтали и вертикали соответственно).
Отображение дистанции для элементов, расположенных по диагонали относительно друг друга, происходит по оси X и Y до угла необходимого элемента:
Также есть возможность увидеть расстояние от края одного элемента до другого во время наложения. Для того, чтобы увидеть расстояние двух наложенных друг на друга элементов, необходимо зажать клавишу Alt (для Windows) или Option (для macOS):
Кроме этого, вы можете увидеть расстояние от элемента до границ блока, кликнув на элемент и зажав соответствующую клавишу:
Подсказка: если вы приблизите элемент ближе, чем на 100 пикселей к краю блока, расстояние до него будет отображаться автоматически.
Перед перемещением элемента с помощью курсора мыши вы можете зажать клавишу Shift, чтобы зафиксировать его расположение по оси X или Y.
Примечание: пока клавиша "Shift" зажата, элемент будет перемещаться только по той оси, по которой вы начали его перемещать.
Это позволяет удобнее управлять частями вашего сайта. Например, если вам нужно сдвинуть изображение только влево или вправо, то благодаря этому функционалу вы сможете избежать случайного смещения элемента по вертикали или по горизонтали.
Подсказка: если выделить мышкой несколько элементов, их можно будет одновременно перемещать по 1 оси.
У вас есть возможность дублировать элементы, зажимая клавишу Alt (для Windows) или Option (для macOS).
Для этого достаточно зажать соответствующую клавишу и начать перемещать выбранный элемент:
После выполнения этого действия автоматически создается копия выбранного объекта и вы можете сразу разместить его где-нибудь в блоке.
Вы можете выделить несколько элементов мышкой или последовательно щелкнуть левой кнопкой мыши на элементы, зажав клавишу Shift:
Таким образом, вы сможете одновременно перемещать, дублировать и удалять несколько элементов в блоке, а также выравнивать контент внутри выделенной группы элементов.
Также можно изменять размер сразу нескольких элементов во Flex block — с помощью выделения группы элементов вы можете одновременно изменить размер каждого из них.
Во время группового увеличения или уменьшения изображения изменение размера будет происходить в соответствии с заданными настройками — например, если в настройках изображения включен переключатель Масштабировать, то это изображение будет изменять размер пропорционально, и наоборот, если переключатель Масштабировать был бы выключен.
Подсказка: если зажать клавишу "Shift", изменение размера изображений всегда будет происходить пропорционально.
Примечание: в элементе “Текст” невозможно изменить высоту при изменении размера группы элементов.
Подсказка: ряд из этих рекомендаций также может быть применён при использовании элементов с абсолютным позиционированием в обычных блоках.
Общие полезные подсказки
Вы можете изменять размер изображения путем зажима левой клавиши мыши на границе элемента (чтобы вместо курсора появилась двусторонняя стрелочка) и перетаскиванием указателя мыши в центр изображения (для его уменьшения) или от центра (для его увеличения).
Дважды щелкните на изображение, чтобы открыть его настройки.
При перемещении элемента, от него к левому верхнему углу блока ведёт пунктирная линия, которая помогает понять, к какому блоку принадлежит выбранный элемент.
После добавления элементов во Flex block необходимо открыть редактор мобильной и планшетной версии сайта и расположить также там элементы нужным вам образом.
Абсолютное позиционирование элементов недоступно в блоках-коллекциях и еще в некоторых блоках.
Ниже рассмотрим дополнительные полезные опции и лайфхаки, которые могут пригодиться при работе с Flex block.
Перемещение элементов с абсолютным позиционированием с помощью клавиатуры
С помощью клавиатуры можно перемещать элементы во Flex block.
Достаточно выбрать элемент и использовать стрелочки на клавиатуре. Одно нажатие на стрелочку будет перемещать элемент на 1 пиксель в соответствующую сторону.
Более того, у вас есть возможность перемещать элементы с шагом в 10 пикселей, зажав клавишу Shift. Это позволяет быстро и эффективно перемещать элементы с точностью до одного пикселя.
Подсказка: при перемещении элементов с помощью стрелочек на клавиатуре, притяжение не осуществляется — это удобно, когда вам необходимо разместить элемент на расстоянии менее 5 пикселей от объекта, к которому происходит притяжение.
Отображение расстояния между элементами во Flex block
Вы можете отслеживать расстояние между абсолютными элементами во Flex block.
Для этого достаточно выделить один элемент и навести курсор на другой, до которого нужно увидеть расстояние:
Примечание: расстояние может отображаться по осям X и Y (по горизонтали и вертикали соответственно).
Отображение дистанции для элементов, расположенных по диагонали относительно друг друга, происходит по оси X и Y до угла необходимого элемента:
Также есть возможность увидеть расстояние от края одного элемента до другого во время наложения. Для того, чтобы увидеть расстояние двух наложенных друг на друга элементов, необходимо зажать клавишу Alt (для Windows) или Option (для macOS):
Кроме этого, вы можете увидеть расстояние от элемента до границ блока, кликнув на элемент и зажав соответствующую клавишу:
Подсказка: если вы приблизите элемент ближе, чем на 100 пикселей к краю блока, расстояние до него будет отображаться автоматически.
Перемещение элементов во Flex block только по 1 оси (X или Y)
Перед перемещением элемента с помощью курсора мыши вы можете зажать клавишу Shift, чтобы зафиксировать его расположение по оси X или Y.
Примечание: пока клавиша "Shift" зажата, элемент будет перемещаться только по той оси, по которой вы начали его перемещать.
Это позволяет удобнее управлять частями вашего сайта. Например, если вам нужно сдвинуть изображение только влево или вправо, то благодаря этому функционалу вы сможете избежать случайного смещения элемента по вертикали или по горизонтали.
Подсказка: если выделить мышкой несколько элементов, их можно будет одновременно перемещать по 1 оси.
Дублирование элементов с помощью клавиши Alt (Option)
У вас есть возможность дублировать элементы, зажимая клавишу Alt (для Windows) или Option (для macOS).
Для этого достаточно зажать соответствующую клавишу и начать перемещать выбранный элемент:
После выполнения этого действия автоматически создается копия выбранного объекта и вы можете сразу разместить его где-нибудь в блоке.
Управление несколькими элементами во Flex block одновременно
Вы можете выделить несколько элементов мышкой или последовательно щелкнуть левой кнопкой мыши на элементы, зажав клавишу Shift:
Таким образом, вы сможете одновременно перемещать, дублировать и удалять несколько элементов в блоке, а также выравнивать контент внутри выделенной группы элементов.
Изменение размера сразу нескольких элементов
Также можно изменять размер сразу нескольких элементов во Flex block — с помощью выделения группы элементов вы можете одновременно изменить размер каждого из них.
Во время группового увеличения или уменьшения изображения изменение размера будет происходить в соответствии с заданными настройками — например, если в настройках изображения включен переключатель Масштабировать, то это изображение будет изменять размер пропорционально, и наоборот, если переключатель Масштабировать был бы выключен.
Подсказка: если зажать клавишу "Shift", изменение размера изображений всегда будет происходить пропорционально.
Примечание: в элементе “Текст” невозможно изменить высоту при изменении размера группы элементов.
Обновлено на: 12/02/2024
Спасибо!