În acest articol, voi explica cum să creați o navbar care se adaptează la diferite dimensiuni de ecran folosind Flexbox împreună cu interogări media.

Acest tutorial poate fi găsit și ca un screencast interactiv în cursul meu gratuit Flexbox de la Scrimba.

Pentru a citi mai multe despre curs, verificați acest articol.

Pregatirea

Să începem cu marcajul pentru o navbară foarte simplă:

<nav>  
  <ul class="container">  
    <li>Home</li>  
    <li>Profile</li>  
    <li class="search">  
      <input type="text" class="search-input" placeholder="Search">  
    </li>  
    <li>Logout</li>  
  </ul>  
</nav>

<ul> elementul este containerul nostru flex și <li> elementele sunt elementele noastre flexibile. Pentru a-l transforma într-un aspect Flexbox vom face:

.container {  
  display: flex;  
}

Ceea ce va avea ca rezultat următorul aspect:

Am adăugat unele stiluri, dar asta nu are nicio legătură cu Flexbox.

Am adăugat unele stiluri, dar asta nu are nicio legătură cu Flexbox.

După cum puteți vedea, avem un pic de spațiu suplimentar în partea dreaptă. Acest lucru se datorează faptului că Flexbox prezintă articolele care merg de la stânga la dreapta și fiecare articol este doar la fel de larg pe cât conținutul său îl obligă să fie.

Deoarece containerul flex în mod implicit este un element la nivel de bloc (și este mai lat decât cele patru elemente) obținem decalajul la final.

Motivul pentru care elementele de căutare este mai larg decât celelalte este că câmpurile de intrare sunt setate implicit la size="20", pe care diferite browsere și sisteme de operare le interpretează în moduri diferite.

Capacitatea de răspuns # 1

Pentru a oferi o reacție de bază a barei de navigație, vom oferi elementului de căutare o valoare flexibilă de 1.

.search {  
  flex: 1;  
}

Acest lucru duce la extinderea și micșorarea elementului de căutare odată cu lățimea containerului, ceea ce înseamnă că nu vom obține spațiu suplimentar în partea dreaptă.

Tutorial Flexbox invatati sa codificati o navbar receptiva cu CSS

Deși are sens să crești elementul de căutare în timp ce ceilalți rămân fixi, ai putea susține că poate deveni prea larg în comparație cu ceilalți. Deci, dacă preferați ca toate articolele să crească odată cu lățimea containerului, puteți pur și simplu să le dați tuturor flex valoarea de 1.

.container > li {  
  flex: 1;  
}

Iată cum se desfășoară acest lucru:

1611600729 798 Tutorial Flexbox invatati sa codificati o navbar receptiva cu CSS

De asemenea, puteți oferi articolelor valori de flexiune diferite, ceea ce le-ar face să crească cu viteze diferite. Simțiți-vă liber să experimentați cu asta în acest loc de joacă Scrimba.

Pentru restul tutorialului, vom continua cu prima soluție, în care elementele de căutare sunt singurele cu un flex valoare.

Sensibilitate # 2

Navbarul nostru funcționează bine pe ecrane largi. Cu toate acestea, pe cele mai înguste, acesta intră în probleme, după cum puteți vedea aici:

1611600729 462 Tutorial Flexbox invatati sa codificati o navbar receptiva cu CSS

La un moment dat, nu este viabil să aveți toate articolele pe același rând, deoarece containerul devine prea îngust. Pentru a rezolva acest lucru, vom adăuga o interogare media în care vom împărți cele patru elemente ale noastre în două rânduri. Interogarea media va începe atunci când ecranul are o lățime de 600 px:

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

}

Mai întâi, permitem ca aspectul Flexbox să se încheie cu flex-wrap. Aceasta este setată implicit la nowrap, așa că va trebui să o schimbăm în wrap.

Următorul lucru pe care îl facem setează elementele ” flex-basis valoare la 50%. Aceasta îi spune lui Flexbox să facă fiecare articol să preia 50% din lățimea disponibilă, ceea ce duce la două articole pe rând, astfel:

Notă: De asemenea, am centrat textul substituent în câmpul de introducere a căutării.

Notă: De asemenea, am centrat textul substituent în câmpul de introducere a căutării.

Acum avem două stări diferite. Cu toate acestea, acest aspect încă nu funcționează pe ecrane foarte mici, cum ar fi ecranele mobile în modul portret.

Dacă continuăm să micșorăm ecranul, acesta va sfârși ca imaginea de mai jos.

1611600730 510 Tutorial Flexbox invatati sa codificati o navbar receptiva cu CSS

Ceea ce s-a întâmplat aici este că al doilea rând nu mai poate încăpea două articole.

Deconectarea și elementele de căutare sunt pur și simplu prea largi, deoarece nu le puteți micșora sub lățimea lor minimă, care este lățimea de care au nevoie pentru a umple conținutul din interiorul lor.

Elementele de acasă și de profil pot totuși să apară pe același rând, de aceea Flexbox le va permite să facă acest lucru. Acest lucru nu este optim, deoarece vrem ca toate rândurile noastre să se comporte în același mod.

Sensibilitate # 3

Deci, de îndată ce unu din rânduri nu se pot încadra două elemente în lățime, vrem nici unul din rânduri pentru a avea două elemente în lățime. Cu alte cuvinte, pe ecrane foarte mici vom face de fapt navbar vertical. Vom stiva articolele una peste alta.

Pentru a realiza acest lucru, trebuie pur și simplu să ne schimbăm lățimea de 50% la 100%, astfel încât fiecare rând să se potrivească doar unui singur element. Vom adăuga acest punct de întrerupere la 400 px.

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

În plus, aș dori să plasez elementul de căutare în partea de jos, motiv pentru care vizez și căutarea order valoarea de 1.

Acest lucru are ca rezultat următoarele:

1611600730 588 Tutorial Flexbox invatati sa codificati o navbar receptiva cu CSS

Motivul order: 1; rezultatele plasării elementului de căutare în partea de jos se datorează faptului că articolele flexibile au în mod implicit o valoare zero, și orice articol are o valoare mai mare decât aceea va fi plasat după celelalte.

Pentru a vedea cum se desfășoară totul, iată gif-ul din partea de sus a articolului:

1611123909 119 Aflati CSS Flexbox in acest tutorial GRATUIT si interactiv

Felicitări! Acum știți cum să creați o navbar complet receptivă utilizând interogări Flexbox și media.

Dacă sunteți interesat să aflați mai multe despre Flexbox, vă recomand să verificați cursul meu gratuit la Scrimba.


Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.

1611011407 121 Aflati TypeScript gratuit cu acest curs interactiv Scrimba
Faceți clic aici pentru a ajunge la bootcampul avansat.