Aflați CSS Flexbox în 5 minute – Un tutorial pentru începători

O introducere rapidă la modulul popular de aspect

În această postare, veți învăța elementele de bază ale CSS Flexbox, care a devenit o abilitate obligatorie pentru dezvoltatorii de web și designeri în ultimii doi ani.

Vom folosi un navbar ca exemplu, deoarece acesta este un caz de utilizare foarte tipic pentru Flexbox. Acest lucru vă va prezenta cele mai utilizate proprietăți ale modulului, lăsând în afara cele care nu sunt la fel de critice.

De asemenea, am creat un curs gratuit cu 12 părți pe Flexbox. Verifică-l aici daca esti interesat!

Acum să începem!

Primul dvs. aspect Flexbox

Cele două componente principale ale unui aspect Flexbox sunt container si obiecte.

Iată codul HTML pentru exemplul nostru, care conține un container cu trei elemente:

<nav class="container">  
  <div>Home</div>  
  <div>Search</div>  
  <div>Logout</div>  
</nav>

Înainte de a transforma acest lucru într-un aspect Flexbox, elementele vor fi stivuite unele peste altele astfel:

Am adăugat un pic de stil, dar asta nu are nicio legătură cu Flexbox.

Pentru a transforma acest lucru într-un aspect Flexbox, vom oferi pur și simplu container următoarea proprietate CSS:

.container {  
    display: flex;  
}

Aceasta va poziționa automat elementele frumos de-a lungul axei orizontale.

Dacă doriți să verificați codul real, puteți accesa acest loc de joacă Scrimba.

Acum, să amestecăm puțin aceste articole.

Justificați conținutul și Aliniați elementele

Justify-content și alinia-elemente sunt două proprietăți CSS care ne ajută să distribuim articolele în container. Ei controlează modul în care obiectele sunt poziționate de-a lungul axa principală și axa transversală.

În cazul nostru (dar nu întotdeauna) axa principală este orizontală, iar axa transversală este verticală:

În acest articol, ne vom uita doar la justify-content, deoarece am descoperit că îl folosesc mult mai mult decât align-items. Cu toate acestea, în cursul meu Flexbox, Explic ambele proprietăți în detaliu.

Să centrăm toate elementele de-a lungul axa principală prin utilizarea justify-content:

.container {  
    display: flex;  
    justify-content: center;  
}

Sau o putem seta la space-between, care va adăuga spațiu între elemente, astfel:

.container {  
    display: flex;  
    justify-content: space-between;  
}

Iată valorile pentru care puteți seta justify-content:

• flex-start (Mod implicit)
• flex-end
• centru
• spațiu între
• în jurul spațiului
• spațial uniform

Vă recomand să vă jucați cu acestea și să vedeți cum se joacă pe pagină. Acest lucru ar trebui să vă ofere o înțelegere adecvată a conceptului.

Controlul unui singur element

De asemenea, putem controla singur obiecte. Să presupunem că, de exemplu, vrem să păstrăm primele două elemente pe partea stângă, dar să mutăm logout butonul din partea dreaptă.

Pentru a face acest lucru, vom folosi vechea tehnică bună de a seta marja la auto.

.logout {  
    margin-left: auto;  
}

Dacă ne-am dori atât search element și logout element care va fi împins în partea dreaptă, vom adăuga pur și simplu margin-left la search element în schimb.

.search {  
    margin-left: auto;  
}

Acesta va împinge elementul de căutare cât mai departe posibil în partea dreaptă, ceea ce va împinge din nou elementul de deconectare cu el:

Proprietatea flex

Până acum, am avut doar articole cu lățime fixă. Dar dacă vrem să fie receptivi? Pentru a realiza acest lucru, avem o proprietate numită flex. Îl face mult mai ușor decât vechiul mod de utilizare a procentelor.

Vom viza pur și simplu toate articolele și le vom da un flex valoarea 1.

.container > div {  
    flex: 1;  
}

După cum puteți vedea, întinde articolele pentru a umple întregul container.

În multe cazuri, probabil că doriți ca unul dintre elemente să preia lățimea suplimentară și, prin urmare, să setați doar unul dintre ele să aibă lățime flexibilă. De exemplu, putem face search articol ocupă tot spațiul suplimentar:

.search {  
    flex: 1;  
}

Înainte de a încheia acest articol, vreau să menționez că proprietatea flex este de fapt o scurtare a trei proprietăți: flex-cresc, flex-shrink și flex-bază. Cu toate acestea, învățarea acestora durează mai mult de cinci minute, deci este în afara sferei acestui tutorial.

Totuși, dacă sunteți interesat să le învățați, vă explic toate cele trei proprietăți cursul meu gratuit Flexbox.

Acum, că ați învățat elementele de bază, veți fi cu siguranță gata să urmați cursul meu complet și să deveniți un maestru Flexbox!

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.