Flexbox-tutorial: Lær at kode en responsiv navbar med CSS Flexbox

I denne artikel forklarer jeg, hvordan man opretter en navbar, der tilpasser sig forskellige skærmstørrelser ved hjælp af Flexbox sammen med medieforespørgsler.

Denne tutorial kan også findes som en interaktiv screencast i mit gratis Flexbox-kursus på Scrimba.

For at læse mere om kurset, tjek denne artikel.

Opsætningen

Lad os begynde med markeringen for en meget enkel navbar:


    
  • Home
  • Profile
  • Logout

Det

    element er vores flexcontainer og
  • elementer er vores fleksible genstande. For at gøre det til et Flexbox-layout gør vi:

    .container { display: flex; } 

    Hvilket vil resultere i følgende layout:

    Jeg har tilføjet noget styling, men det har intet at gøre med Flexbox.

    Jeg har tilføjet noget styling, men det har intet at gøre med Flexbox.

    Som du kan se, har vi lidt ekstra plads på højre side. Dette skyldes, at Flexbox lægger de emner, der går fra venstre mod højre, og hvert emne er kun så bredt, som dets indhold tvinger det til at være.

    Da flexcontaineren som standard er et blokniveauelement (og er bredere end de fire emner), får vi hullet i slutningen.

    Årsagen til, at søgepunkterne er bredere end de andre, er, at inputfelter som standard er indstillet til size="20", som forskellige browsere og operativsystemer fortolker på forskellige måder.

    Respons # 1

    For at give vores navbar grundlæggende lydhørhed giver vi simpelthen søgeemnet en flexværdi på 1.

    .search { flex: 1; } 

    Dette resulterer i, at søgeemnet udvides og krymper med containerens bredde, hvilket betyder, at vi ikke får den ekstra plads i højre side.

    Selv om det giver mening at få søgeemnet til at vokse, mens de andre forbliver faste, kan du argumentere for, at det kan blive for bredt sammenlignet med de andre. Så hvis du foretrækker at få alle varerne til at vokse med containerens bredde i stedet, kan du simpelthen give alle varerne en flexværdi på 1.

    .container > li { flex: 1; } 

    Sådan spiller det ud:

    Du kan også give varerne forskellige flexværdier, hvilket får dem til at vokse med forskellige hastigheder. Du er velkommen til at eksperimentere med det på denne Scrimba-legeplads.

    I resten af ​​vejledningen fortsætter vi med den første løsning, hvor søgepunkterne er de eneste med en flexværdi.

    Respons # 2

    Vores navbar fungerer godt på brede skærme. Men på mere snævre dem kommer det i problemer, som du kan se her:

    På et tidspunkt er det ikke levedygtigt at have alle genstande på samme række, da containeren bliver for smal. For at løse dette tilføjer vi en medieforespørgsel, hvor vi deler vores fire emner i to rækker. Medieforespørgslen vil sparke, når skærmen er 600 px bred:

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

    Først tillader vi Flexbox-layoutet at pakke med flex-wrap. Dette er som standard indstillet til nowrap, så vi bliver nødt til at ændre det til wrap.

    Den næste ting, vi gør det, indstiller elementernes flex-basisværdi til 50%. Dette beder Flexbox om at få hvert element til at optage 50% af den tilgængelige bredde, hvilket resulterer i to emner pr. Række som denne:

    Bemærk: Jeg har også centreret pladsholderteksten i søgefeltet.

    Bemærk: Jeg har også centreret pladsholderteksten i søgefeltet.

    Nu har vi to forskellige tilstande. Dette layout fungerer dog stadig ikke på meget små skærme, som mobilskærme i stående tilstand.

    Hvis vi fortsætter med at krympe skærmen, ender det som billedet nedenfor.

    Hvad der skete her er, at anden række ikke længere kan passe til to emner.

    Logout og søgeelementer er simpelthen for brede, da du ikke kan krympe dem til under deres mindste bredde, hvilket er den bredde, de har brug for for at udfylde indholdet inde i dem.

    Hjem- og profilelementerne kan dog stadig vises i samme række, så Flexbox tillader dem at gøre det. Dette er ikke optimalt, da vi vil have, at alle vores rækker opfører sig på samme måde.

    Respons # 3

    Så snart en af rækkerne ikke kan passe to emner i bredden, vil vi have, at ingen af rækkerne har to emner i bredden. Med andre ord, på meget små skærme gør vi faktisk navbar lodret. Vi stabler emnerne oven på hinanden.

    For at opnå dette er vi simpelthen nødt til at ændre vores 50% bredde til 100%, så hver række kun passer til en enkelt vare. Vi tilføjer dette breakpoint ved 400px.

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

    Ud over dette vil jeg gerne placere søgeelementet i bunden, hvorfor jeg også målretter søgningen og giver den en orderværdi på 1.

    Dette resulterer i følgende:

    Årsagen order: 1;til, at søgeelementet placeres i bunden, er, at flex-poster som standard har en værdi på nul, og uanset hvilket element der har en højere værdi end det, placeres efter de andre.

    For at se, hvordan det hele spiller ud, er her gif'et fra toppen af ​​artiklen:

    Tillykke! Du ved nu, hvordan du opretter en fuldt responsiv navbar ved hjælp af Flexbox og medieforespørgsler.

    Hvis du er interesseret i at lære mere om Flexbox, vil jeg anbefale dig at tjekke mit gratis kursus på Scrimba.

    Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.