Корисні підказки для 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
Дякуємо!