У цьому Посібнику ми розглянемо використання модифікатора властивостей flex-shrink у CSS. Ця опція є частиною моделі Flexbox, що дозволяє створювати гнучкі макети, які адаптуються до різних розмірів екранів. Після того, як ми розглянули flex-grow у попередньому відео, де визначається, як елементи можуть розширюватися в Flex-контейнері, на цей раз ми розглянемо зменшення елементів, коли місця в контейнері менше, ніж встановлена початкова гнучка база. У цій статті ви дізнаєтеся, як за допомогою flex-shrink змінювати обмеження або адаптувати зменшення елементів Flexbox цілеспрямовано.
Найголовніші висновки
- flex-shrink визначає, наскільки може зменшитися елемент, якщо місця недостатньо.
- Стандартне значення для flex-shrink - 1, що означає, що елемент може займати місце, залежно від наявного місця та визначених інших елементів у контейнері.
- Можна використовувати flex-shrink, щоб встановити певне співвідношення для зменшення між декількома елементами.
Крок за кроком навчання
Нижче я поясню перші кроки щодо оптимального використання flex-shrink. Я буду пояснювати кожен крок зі змінними скріншотами, які ви зможете пізніше замінити скріншотами з відео.
Спочатку ви побачите базове використання Flexbox у CSS. Ви маєте три елементи з гнучкою базою на 100 пікселів. Якщо в контейнері Flex достатньо місця, все лишиться за планом.
Тепер зменшуємо висоту контейнера до 200 пікселів. У цьому випадку потрібне місце більше, ніж висота контейнера. Елементи все ще мають гнучку базу на 100 пікселів і тому не можуть зменшуватися, оскільки ми встановили flex-shrink на 0.
Щоб активувати механізм зменшення, змініть значення flex-shrink. Встановіть його для елементу меню на 1. Таким чином, ви повідомляєте CSS, що елемент меню повинен максимально зменшуватися.
Збережіть внесені зміни, і ви побачите, що елемент меню пропорційно зменшується аж до мінімальної висоти, визначеної вмістом.
Якщо вам потрібно, щоб всі елементи зменшувались рівномірно, встановіть flex-shrink для всіх елементів на 1. Якщо тепер контейнер стає меншим, ніж потрібне місце, всі елементи відповідно зменшаться.
Щоб показати, як різні значення flex-shrink впливають на макет, виберіть співвідношення, наприклад, 1:1:2. У цьому випадку головний розділ (основний) отримує найбільшу частку зменшення, тоді як інші елементи отримують менші частки.
Це означає, що елемент основний при нестачі місця візьме більше місця або буде потребувати менше місця, ніж обидва інших елементи. Але якщо вам необхіден плавний розрахунок макету, ви також можете встановити для всіх елементів одне й те ж значення flex-shrink.
На завершення можна поєднувати значення flex-grow, flex-shrink і flex-basis, що надасть вам більше гнучкості при створенні макетів за допомогою CSS. Завжди слід враховувати, що вони повинні відповідати вимогам вашого дизайну.
Підсумок
У цьому посібнику ви навчились використовувати flex-shrink у CSS для управління зміною розмірів елементів Flexbox. Ви дізнались різні способи визначення зменшення і його впливу на макет.
Часті запитання
Як працює flex-shrink?flex-shrink визначає, наскільки може зменшитися елемент, коли доступне місце менше, ніж flex-basis.
Яке стандартне значення у flex-shrink?Стандартне значення flex-shrink - 1, що означає рівномірне зменшення всіх елементів.
Як встановити flex-shrink для декількох елементів?Встановлення одного й того ж значення flex-shrink для всіх елементів розподілить зменшення рівномірно.
Чи можна використовувати flex-shrink разом із flex-grow?Так, flex-shrink, flex-grow та flex-basis можна використовувати разом для досягнення гнучкого макету.
Що відбудеться, якщо встановити flex-shrink на 0?Якщо flex-shrink встановлено на 0, елементи не зменшаться, навіть якщо контейнер менший, ніж сума flex-basis.
