Paano lumikha ng isang ganap na tumutugon sa nabigasyon na bar na may Flexbox

Isang navigation bar, tatlong magkakaibang mga layout.

Sa artikulong ito, ipapaliwanag ko kung paano gamitin ang Flexbox upang lumikha ng isang bar ng nabigasyon na, kasama ang mga query sa media, ayusin sa iba't ibang mga laki ng screen.

Ang tutorial na ito ay maaari ding matagpuan bilang isang interactive screencast sa aking libreng kurso sa Flexbox sa Scrimba.

Para sa karagdagang impormasyon tungkol sa kurso, tingnan ang artikulong ito.

Ang pagtatatag

Magsimula tayo sa markup para sa isang napaka-simpleng bar sa pag-navigate:

Home page profile Mag-sign out

Ang Ang elemento ay ang aming lalagyan ng pagbaluktot at ang -Mga elemento ang aming mga elemento ng pagbaluktot. Upang makagawa ng isang layout ng flexbox dito, magpatuloy tulad ng sumusunod:

.container {Display: Flex; }

Alin ang humahantong sa sumusunod na layout:

Nagdagdag ako ng kaunting istilo, ngunit wala itong kinalaman sa flexbox.

Tulad ng nakikita mo, mayroon kaming kaunting puwang sa kanan. Dahil sa inaayos ng Flexbox ang mga elemento mula kaliwa hanggang kanan at ang bawat elemento ay kasing lapad lamang ng mga nilalaman nito.

Dahil ang lalagyan ng flex ay isang elemento ng antas ng block bilang default (at mas malawak kaysa sa apat na elemento), nakukuha natin ang puwang sa dulo.

Ang dahilan na ang mga elemento ng paghahanap ay mas malawak kaysa sa iba pa ay ang mga input na patlang ay nakatakda sa laki = "20" bilang default, na magkakaiba ang pagbibigay kahulugan ng iba't ibang mga browser at operating system.

Pagkasagot # 1

Upang bigyan ang aming navigation bar ng pangunahing kakayahang tumugon, binibigyan lamang namin ang termino para sa paghahanap ng isang nababaluktot na halagang 1.

.Search {flex: 1; }

Ito ang bunga na ang elemento ng paghahanap ay pinalawak at nakakontrata sa lapad ng lalagyan. Kaya't walang karagdagang puwang na magagamit sa kanan.

Habang makatuwiran upang mag-zoom in sa elemento ng paghahanap habang pinapanatili ang iba pang naayos, maaari itong maipagtalo na maaari itong maging masyadong malawak kumpara sa iba. Kaya kung mas gugustuhin mong lumaki ang lahat ng mga elemento sa lapad ng lalagyan, maaari kang magtalaga ng isang nababaluktot na halagang 1 sa lahat ng mga elemento.

.container> li {flex: 1; }

Ito ay kung paano ito gumagana:

Maaari ka ring magtalaga ng iba't ibang mga halaga ng pagbaluktot sa mga elemento, na nagpapalaki sa mga ito sa iba't ibang mga bilis. Subukan iyon sa palaruan sa scrimba.

Para sa natitirang tutorial, magpapatuloy kami sa unang solusyon, kung saan ang item sa paghahanap ay ang isa lamang na may nababaluktot na halaga.

Pagkasagot # 2

Mahusay na gumagana ang aming navigation bar sa mga widescreen screen. Gayunpaman, may mga problema sa mas makitid, tulad ng makikita mo rito:

Sa ilang mga punto hindi na posible na magkaroon ng lahat ng mga elemento sa parehong linya dahil ang lalagyan ay nagiging masyadong makitid. Upang malutas ito, magdagdag tayo ng isang query sa media kung saan hinati natin ang aming apat na item sa dalawang hilera. Sinimulan ang query ng media kapag ang screen ay 600 pixel ang lapad:

@media lahat at (max-width: 600px) {.container {Flex-Wrap: Wrap; } .container> li {Flex na batayan: 50%; }
}

Una mayroon kaming layout ng flexbox na nakabalot sa balot ng baluktot. Ito ay nakatakda sa nowrap bilang default, kaya kailangan naming palitan ito upang ibalot.

Susunod na itinakda namin ang halaga ng base ng flex ng mga elemento sa 50%. Ito ay sanhi ng Flexbox na magkaroon ng bawat elemento na sakupin ang 50% ng magagamit na lapad, na nagreresulta sa dalawang elemento bawat linya, tulad ng sumusunod:

Tandaan: Isinentro ko rin ang teksto ng placeholder sa kahon ng pag-input ng paghahanap.

Ngayon mayroon kaming dalawang magkakaibang estado. Gayunpaman, ang layout na ito ay hindi pa rin gumagana sa napakaliit na mga screen, hal. B. mga mobile screen sa format na portrait.

Kung magpapatuloy kaming mag-zoom out sa screen, lilitaw ito tulad ng sumusunod na imahe.

Ang nangyari dito ay ang pangalawang hilera na hindi na magkasya sa dalawang item.

Ang mga item sa pag-unsubscribe at paghahanap ay masyadong malawak dahil hindi mo maaaring pag-urongin ang mga ito sa ibaba ng minimum na kinakailangang lapad upang punan ang nilalaman sa kanila.

Gayunpaman, ang mga elemento ng binhi at profile ay maaari pa ring lumitaw sa parehong linya, kaya pinapayagan ito ng Flexbox. Hindi ito optimal dahil nais namin ang lahat ng mga linya na kumilos sa parehong paraan.

Pagkasagot # 3

Sa sandaling ang isa sa mga linya ay hindi na maaaring tumanggap ng dalawang mga elemento sa lapad, wala sa mga linya ang dapat magkaroon ng dalawang elemento sa lapad. Sa madaling salita, sa napakaliit na mga screen, lilitaw nang patayo ang nabigasyon. Isasalansan namin ang mga item sa bawat isa.

Upang magawa ito kailangan lang naming baguhin ang aming 50% na lapad sa 100% upang ang bawat hilera ay magkasya lamang sa isang item. Idaragdag namin ang breakpoint na ito sa 400px.

@media lahat at (max-width: 400px) {.container> li {Flex-Basis: 100%; } .Search {order: 1; }}

Bilang karagdagan, nais kong ilagay ang term ng paghahanap sa ilalim. Sa kadahilanang ito ay inaayos ko rin ang paghahanap sa 1.

Nagreresulta ito sa mga sumusunod:

Ang pangunahing pagkakasunud-sunod: 1; Nagreresulta ito sa paglalagay ng elemento ng paghahanap sa ilalim, dahil ang mga elemento ng flex ay may halagang zero bilang default at ang bawat elemento ay may mas mataas na halaga kaysa sa halagang inilalagay pagkatapos ng iba pang mga elemento.

Narito ang GIF sa tuktok ng artikulo upang makita kung paano ito gumagana:

Pagbati! Alam mo na ngayon kung paano gamitin ang Flexbox at Media Queries upang lumikha ng isang ganap na tumutugong nabigasyon bar.

Kung nais mong matuto nang higit pa tungkol sa Flexbox, inirerekumenda namin na kunin mo ang aking libreng kurso sa Scrimba.

Mag-click sa larawan upang pumunta sa aking libreng kurso sa flexbox.

Salamat sa pagbabasa! Ang pangalan ko ay Per, ako ang co-founder ng Scrimba at gusto kong tulungan ang mga tao na malaman ang mga bagong kasanayan. Sundan ako sa Twitter para sa mga update sa mga bagong artikulo at mapagkukunan.