Урок за Flexbox: Научете се да кодирате адаптивна навигационна лента с CSS Flexbox

В тази статия ще ви обясня как да създадете лента за навигация, която се адаптира към различни размери на екрана с помощта на Flexbox заедно с медийни заявки.

Този урок може да бъде намерен и като интерактивна скринкаст в моя безплатен курс на Flexbox в Scrimba.

За да прочетете повече за курса, вижте тази статия.

Конфигурацията

Нека започнем с маркирането за много проста навигационна лента:

  • Home
  • Profile
  • Logout

The

Original text


    е нашият гъвкав контейнер и
  • елементите са нашите флекс елементи. За да го превърнем във оформление на Flexbox, ще направим:

    .container { display: flex; } 

    Което ще доведе до следното оформление:

    Добавих малко стайлинг, но това няма нищо общо с Flexbox.

    Добавих малко стайлинг, но това няма нищо общо с Flexbox.

    Както можете да видите, имаме малко допълнително пространство от дясната страна. Това е така, защото Flexbox излага елементите, преминаващи отляво надясно, и всеки елемент е толкова широк, колкото съдържанието му го налага.

    Тъй като гъвкавият контейнер по подразбиране е елемент на ниво блок (и е по-широк от четирите елемента), получаваме празнината в края.

    Причината, поради която елементите за търсене са по-широки от останалите, е, че полетата за въвеждане по подразбиране са настроени на size="20", което различните браузъри и операционни системи интерпретират по различен начин.

    Отзивчивост # 1

    За да дадем на навигационната лента основна реакция, ние просто ще дадем на елемента за търсене гъвкава стойност 1.

    .search { flex: 1; } 

    Това води до разширяване и свиване на елемента за търсене с ширината на контейнера, което означава, че няма да получим допълнително място в дясната страна.

    Въпреки че има смисъл елементът за търсене да расте, докато останалите остават фиксирани, можете да твърдите, че той може да стане твърде широк в сравнение с останалите. Така че, ако предпочитате вместо това всички елементи да растат с ширината на контейнера, можете просто да дадете flexстойност на всички елементи 1.

    .container > li { flex: 1; } 

    Ето как се играе това:

    Можете също така да дадете на елементите различни флекс стойности, което би ги накарало да растат с различна скорост. Чувствайте се свободни да експериментирате с това в тази площадка на Скримба.

    За останалата част от урока ще продължим с първото решение, където елементите за търсене са единствените със flexстойност.

    Отзивчивост # 2

    Нашата лента за навигация работи добре на широки екрани. При по-тесните обаче има проблеми, както можете да видите тук:

    В даден момент не е жизнеспособно всички елементи да са на един ред, тъй като контейнерът става твърде тесен. За да разрешим това, ще добавим медийна заявка, където ще разделим нашите четири елемента на два реда. Запитването за мултимедия ще започне, когато екранът е широк 600px:

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

    Първо, позволяваме на Flexbox оформлението да се увива flex-wrap. Това по подразбиране е настроено на nowrap, така че ще трябва да го променим на wrap.

    Следващото нещо, което правим, е да зададем flex-basisстойността на елементите на 50%. Това казва на Flexbox да накара всеки елемент да заема 50% от наличната ширина, което води до два елемента на ред, като това:

    Забележка: Аз също центрирах текста на заместителя в полето за въвеждане на търсене.

    Забележка: Аз също центрирах текста на заместителя в полето за въвеждане на търсене.

    Сега имаме две различни състояния. Това оформление обаче все още не работи на много малки екрани, като мобилни екрани в портретен режим.

    Ако продължим да свиваме екрана, той ще завърши като изображението по-долу.

    Това, което се случи тук, е, че вторият ред вече не може да побере два елемента.

    Изходът и елементите за търсене са просто твърде широки, тъй като не можете да ги свиете под минималната им ширина, която е ширината, от която се нуждаят, за да запълнят съдържанието вътре в тях.

    Елементите за дома и профила все още могат да се показват на същия ред, така че Flexbox ще им позволи да го направят. Това не е оптимално, тъй като искаме всички наши редове да се държат по същия начин.

    Отзивчивост # 3

    Така че, щом един от редовете не може да побере два елемента в ширината, ние искаме нито един от редовете да няма два елемента в ширината. С други думи, на много малки екрани всъщност ще направим навигационната лента вертикална. Ще подреждаме елементите един върху друг.

    За да постигнем това, просто трябва да променим нашите 50% ширина на 100%, така че всеки ред да побира само един елемент. Ще добавим тази точка на прекъсване при 400px.

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

    В допълнение към това бих искал да поставя елемента за търсене отдолу, поради което насочвам търсенето и му давам orderстойност 1.

    Това води до следното:

    Причината order: 1;за това, че елементът за търсене се поставя най-отдолу, е, че елементите на flex по подразбиране имат стойност нула и всеки елемент има по-висока стойност от тази ще бъде поставен след останалите.

    За да видите как се играе всичко, ето гифът в горната част на статията:

    Поздравления! Вече знаете как да създадете напълно отзивчива навигационна лента, използвайки Flexbox и медийни заявки.

    Ако се интересувате да научите повече за Flexbox, бих ви препоръчал да разгледате моя безплатен курс в Scrimba.

    Благодаря за четенето! Казвам се Per Borgen, аз съм съосновател на Scrimba - най-лесният начин да се науча да кодирам. Трябва да проверите нашия отзивчив уебкамп за уеб дизайн, ако искате да се научите да изграждате модерен уебсайт на професионално ниво.