Підручник з Flexbox: Навчіться кодувати адаптивну панель навігації за допомогою CSS Flexbox

У цій статті я поясню, як створити панель навігації, яка адаптується до різних розмірів екрану за допомогою Flexbox разом із медіа-запитами.

Цей підручник також можна знайти як інтерактивну трансляцію на моєму безкоштовному курсі Flexbox у Скрімбі.

Щоб прочитати більше про курс, перегляньте цю статтю.

Налаштування

Почнемо з розмітки для дуже простої навігаційної панелі:

  • Home
  • Profile
  • Logout

Original text


    елементом є наш контейнер Flex і
  • елементи - це наші гнучкі елементи. Щоб перетворити його на макет Flexbox, ми зробимо:

    .container { display: flex; } 

    Що призведе до наступного макета:

    Я додав певний стиль, але це не має нічого спільного з Flexbox.

    Я додав певний стиль, але це не має нічого спільного з Flexbox.

    Як бачите, у нас є трохи додаткового місця з правого боку. Це пов’язано з тим, що Flexbox розміщує елементи, що рухаються зліва направо, і кожен предмет настільки широкий, наскільки його зміст змушує його бути.

    Оскільки контейнер flex за замовчуванням є елементом рівня блоку (і ширший, ніж чотири елементи), ми отримуємо пробіл в кінці.

    Причина, що елементи пошуку ширші за інші, полягає в тому, що поля введення за замовчуванням мають значення size="20", яке різні браузери та операційні системи інтерпретують по-різному.

    Чуйність # 1

    Щоб надати нашій панелі навігації базову реакцію, ми просто надамо елементу пошуку гнучке значення 1.

    .search { flex: 1; } 

    Це призводить до того, що елемент пошуку розширюється і зменшується з шириною контейнера, це означає, що ми не отримаємо зайвого місця в правій частині.

    Хоча має сенс збільшувати елемент пошуку, поки інші залишаються фіксованими, ви можете стверджувати, що він може стати занадто широким порівняно з іншими. Отже, якщо ви віддаєте перевагу, щоб замість цього всі елементи зростали з шириною контейнера, ви можете просто надати всім елементам flexзначення 1.

    .container > li { flex: 1; } 

    Ось як це відбувається:

    Ви також можете задати елементам різні значення гнучкості, що змусить їх рости з різною швидкістю. Не соромтеся експериментувати з цим на цьому ігровому майданчику Скрімба.

    Для решти уроку ми продовжимо перше рішення, де елементи пошуку є єдиними зі flexзначенням.

    Чуйність # 2

    Наша панель навігації добре працює на широких екранах. Однак на більш вузьких проблемах виникають проблеми, як ви можете бачити тут:

    У якийсь момент неможливо мати всі предмети в одному рядку, оскільки контейнер стає занадто вузьким. Щоб вирішити цю проблему, ми додамо медіа-запит, де розділимо чотири елементи на два рядки. Медіа-запит почнеться, коли екран має ширину 600 пікселів:

    @media all and (max-width: 600px) { .container { flex-wrap: wrap; } .container > li { flex-basis: 50%; } } 

    По-перше, ми дозволяємо макету Flexbox обертатися flex-wrap. Це за замовчуванням встановлено на nowrap, тому нам доведеться змінити його на wrap.

    Наступне, що ми робимо, встановлюємо значення предметів flex-basis50%. Це говорить Flexbox зробити так, щоб кожен предмет займав 50% доступної ширини, що призводить до двох елементів у рядку, наприклад:

    Примітка. Я також відцентрував текст заповнювача в полі введення пошуку.

    Примітка. Я також відцентрував текст заповнювача в полі введення пошуку.

    Зараз у нас є два різні держави. Однак цей макет все ще не працює на дуже маленьких екранах, як, наприклад, мобільні екрани в портретному режимі.

    Якщо ми продовжимо зменшувати екран, це закінчиться, як на зображенні нижче.

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

    Елементи виходу та пошуку просто занадто широкі, оскільки ви не можете зменшити їх до мінімальної ширини, тобто ширини, необхідної їм для заповнення вмісту всередині них.

    Елементи будинку та профілю все ще можуть відображатися в одному рядку, тому Flexbox дозволить їм це робити. Це не оптимально, оскільки ми хочемо, щоб усі наші рядки поводились однаково.

    Чуйність # 3

    Отже, як тільки один з рядків не може вмістити два елементи по ширині, ми хочемо, щоб жоден з рядків не мав двох елементів по ширині. Іншими словами, на дуже маленьких екранах ми насправді зробимо панель навігації вертикальною. Ми будемо складати елементи один на одного.

    Для цього нам просто потрібно змінити ширину 50% на 100%, щоб кожен рядок містив лише один елемент. Ми додамо цю точку зупинки на 400 пікс.

    @media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } } 

    На додаток до цього, я хотів би розмістити елемент пошуку внизу, саме тому я також націлюю пошук і надаю йому orderзначення 1.

    Це призводить до наступного:

    Причиною order: 1;того, що пошуковий елемент розміщується внизу, є те, що гнучкі елементи за замовчуванням мають нульове значення, і будь-який елемент має вищі значення, ніж той, який буде розміщений після інших.

    Щоб побачити, як все це відбувається, ось gif у верхній частині статті:

    Вітаємо! Тепер ви знаєте, як створити повністю адаптивну панель навігації за допомогою запитів Flexbox та медіа.

    Якщо ви хочете дізнатись більше про Flexbox, я рекомендую вам ознайомитися з моїм безкоштовним курсом у Scrimba.

    Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.