У цій статті ми розглянемо певні зручні опції, котрими можна користуватися для економії часу та для загальної зручності під час роботи із 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