Cum să construiți layout-uri inteligente numai CSS cu Flexbox

Cutia flexibilă, sau Flexbox pe scurt, este un set de proprietăți în CSS introdus în 2009 pentru a oferi un sistem de layout nou, excepțional. Modulul Flexbox este identificat ca parte a celei de-a treia versiuni de CSS (CSS3).

Probabil că utilizați deja multe dintre noile proprietăți în CSS3, cum ar fi box-shadow , border-radius , gradienti de fundal și așa mai departe. Cu toate acestea, Flexbox nu a văzut încă adoptarea pe scară largă pe care o merită. Acest lucru se poate datora tuturor schimbărilor de ultimă oră pe care le-a suferit de-a lungul anilor sau pentru că este suportat doar parțial în Internet Explorer 10, sau doar pentru că Flexbox este un întreg ecosistem, în timp ce paradigmele anterioare s-au bazat în principal pe un singur sistem gata de utilizare. go proprietăți.

Este super puternic și oferă o gamă largă de opțiuni pentru a realiza machete la care, anterior, nu puteau fi decât visate.

Acest articol vă va ghida prin elementele de bază ale Flexbox și cum îl puteți utiliza pentru a realiza niște aspecte foarte interesante, care altfel ar necesita hack-uri CSS complicate sau chiar JavaScript.

De ce să folosiți Flexbox?

În mod implicit, elementele HTML la nivel de bloc se stivuiesc, așa că, dacă doriți să le aliniați într-un rând, trebuie să vă bazați pe proprietăți CSS precum float sau să manipulați proprietatea de display cu setări de tip tabel sau blocuri inline.

Dacă alegeți să utilizați float (stânga sau dreapta), trebuie să curățați ambalajul la un moment dat pentru a-l împinge până la ultimul element plutit, altfel, acestea se vor revarsă peste orice urmează. Cu toate acestea, cu float, ești limitat la organizarea elementelor pe orizontală.

Alternativ, sau în plus, puteți manipula proprietatea de display pentru a încerca să obțineți aspectul dorit! Dar acest lucru se simte adesea neplăcut în cel mai bun caz, ca să nu mai vorbim de plictisitor, și deseori are ca rezultat un aspect destul de fragil, care nu se va afișa neapărat în mod consecvent între browsere. Această abordare este deosebit de ineficientă dacă vizați mai multe dispozitive de dimensiuni diferite, ceea ce este aproape întotdeauna cazul în zilele noastre.

Intră în Flexbox!

Cu o regulă simplă aplicată unui element părinte, puteți controla cu ușurință comportamentul aspectului tuturor copiilor acestuia.

Cu Flexbox, puteți:

• Inversați ordinea elementelor din interiorul unui părinte Flexbox.
• Înfășurați elementele copil în coloane (numărul de coloane poate varia în funcție de înălțimea copilului și a părintelui).
• Specificați viteza cu care elementele cresc sau se micșorează în timp ce dimensiunea ferestrei de vizualizare se modifică.
• Controlați dacă elementele pot fi contractate sau nu, indiferent de tipul de unitate de lățime specificat (relativ sau absolut).
• Schimbați ordinea elementelor cu CSS (combinați acest lucru cu interogări media și veți găsi posibilități nelimitate în fluxul dvs.).
• Generați distribuții complexe ale elementelor care să fie echidistante cu spațiul din jur sau doar cu spațiul dintre.
• Generați elemente „renegate” care curg diferit (toată lumea la stânga, dar unul la dreapta, sus/jos... este chemarea dvs.).
• Și, cel mai important, evită definitiv hack-ul clear-fix!

Înțeleg că Flexbox poate fi greu la început. Cred că este mai ușor să înveți zece proprietăți CSS fără legătură decât cinci cu o oarecare interdependență. Cu toate acestea, cu abilitățile tale actuale CSS și poate puțin ajutor din acest articol, te vei lansa într-un nou univers CSS.

Elementele de bază ale Flexbox

Afişa

display este una dintre cele mai de bază proprietăți în CSS și este destul de importantă în contextul Flexbox, deoarece este folosit pentru a defini un wrapper flex.

Există două valori posibile pentru flex: flex și inline-flex .

Diferența dintre cele două este că un display: flex wrapper acționează ca un element bloc, în timp ce un display: inline-flex wrapper acționează ca un bloc inline. De asemenea, elementele inline-flex cresc dacă nu există suficient spațiu pentru a conține copiii. Dar, în afară de aceste diferențe, comportamentul celor doi ar fi același.

Încercați exemplul de cod de mai jos, reduceți lățimea ferestrei de vizualizare când inline-flex este activ și... derulați.

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `display` de DD (@Diegue) pe CodePen.

 .wrapper { display: flex || inline-flex; }

Direcție Flex

Acum că ați văzut primul eșantion, puteți deduce că comportamentul implicit este să faceți pur și simplu un rând de elemente. Dar mai sunt:

• rând (implicit): Aranjează elementele de la stânga la dreapta (dar dacă RTL este setat, ar fi înapoi).
• row-reverse: inversează ordinea elementelor dintr-o dispoziție de rând
• coloană: aranjează elementele de sus în jos
• column-reverse: inversează ordinea elementelor dintr-o dispoziție de coloană

Sugestie: Valorile column și column-reverse pot fi folosite pentru a schimba axele, astfel încât proprietățile care ar afecta axa orizontală ar afecta în schimb axa verticală.

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `flex-direction` de DD (@Diegue) pe CodePen.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

Flex Wrap

Dacă verificați primul exemplu de cod, vă veți da seama că elementele copil nu se stivuiesc în mod implicit într-un înveliș flexibil. Aici intervine flex-wrap :

• nowrap (implicit): împiedică ambalarea articolelor dintr-un container flexibil
• wrap: împachetează articolele după cum este necesar în mai multe rânduri (sau coloane, în funcție flex-direction )
• wrap-reverse: la fel ca wrap , dar numărul de rânduri (sau coloane) crește în direcția opusă pe măsură ce articolele sunt împachetate

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `flex-wrap` de DD (@Diegue) pe CodePen.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

Flex Flow

Puteți combina proprietățile flex-direction și flex-wrap într-o singură proprietate: flex-flow .

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

Justificați conținutul

Această proprietate este utilizată pentru a controla alinierea orizontală a elementelor copil:

• flex-start (implicit): Elementele sunt aliniate la stânga (similar cu elementele inline cu text-align: left )
• flex-end: elementele sunt aliniate la dreapta (similar elementelor inline cu text-align: right )
• center: Elementele sunt centrate (similar cu elementele inline cu text-align: center )
• space-around (unde începe magia): Fiecare element va fi redat cu aceeași cantitate de spațiu în jurul fiecărui element. Rețineți că spațiul dintre două elemente secundare secvențiale va fi dublu față de spațiul dintre elementele cele mai exterioare și părțile laterale ale învelișului.
• space-between: La fel ca space-around , cu excepția faptului că elementele vor fi separate la aceeași distanță și nu va exista spațiu în apropierea niciunei margini a învelișului.

Notă: Amintiți flex-direction , când este setată la column sau column-reverse , schimbă axa. Dacă una dintre acestea este setată, justify-content va afecta alinierea verticală, nu orizontală.

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `justify-content` de DD (@Diegue) pe CodePen.

Aliniați elementele

Această proprietate este similară cu justify-content dar contextul efectelor sale este rândurile în loc de wrapper-ul în sine:

• flex-start: Elementele sunt aliniate vertical cu partea de sus a ambalajului.
• flex-end: Elementele sunt aliniate vertical pe partea de jos a ambalajului.
• centru: Elementele sunt centrate vertical în interiorul învelișului (în cele din urmă, o practică sigură pentru a realiza acest lucru).
• stretch (implicit): Forțează elementele să ocupe toată înălțimea (când sunt aplicate unui rând) și lățimea completă (când sunt aplicate pe o coloană) a învelișului.
• linie de bază: aliniază vertical elementele la liniile lor de bază reale.

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `align-items` de DD (@Diegue) pe CodePen.

Aliniați conținutul

Această proprietate este similară cu justify-content și align-items , dar funcționează pe axa verticală, iar contextul este întregul wrapper (nu rândul ca exemplul anterior). Pentru a-i vedea efectele, veți avea nevoie de mai multe rânduri:

• flex-start: rândurile sunt aliniate vertical la partea de sus (adică, stivuite din partea de sus a ambalajului).
• flex-end: rândurile sunt aliniate vertical la partea de jos (adică, stivuite de la partea de jos a ambalajului).
• centru: rândurile sunt centrate în ambalaj vertical.
• stretch (implicit): în general, această proprietate întinde elementele pentru a utiliza întreaga înălțime verticală a învelișului. Cu toate acestea, dacă ați setat o înălțime specifică a elementelor, acea înălțime va fi respectată și spațiul vertical rămas (în acel rând, sub acel element) va fi gol.
• space-around: Fiecare rând va fi redat cu aceeași cantitate de spațiu în jurul său vertical (adică, sub și deasupra lui). Rețineți că spațiul dintre două rânduri va fi, prin urmare, dublu față de spațiul dintre rândurile de sus și de jos și marginile învelișului.
• space-between: La fel ca space-around , cu excepția faptului că elementele vor fi separate la aceeași distanță și nu va exista spațiu pe marginile de sus și de jos ale învelișului.

Vedeți Pen Flexbox @Toptal - Parent - proprietatea `align-content` de DD (@Diegue) pe CodePen.

Flex Grow

Această proprietate stabilește proporția relativă a spațiului disponibil pe care ar trebui să-l folosească elementul. Valoarea ar trebui să fie un număr întreg, unde 0 este valoarea implicită.

Să presupunem că aveți două elemente diferite în același înveliș flexibil. Dacă ambele au o valoare de flex-grow de 1, acestea vor crește în mod egal pentru a împărți spațiul disponibil. Dar dacă unul are o valoare flex-grow de 1 și celălalt o valoare flex-grow de 2, așa cum se arată în exemplul de mai jos, acesta cu o valoare flex-grow de 2 va crește pentru a ocupa de două ori mai mult spațiu decât primul.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; } 

Vedeți Pen Flexbox @Toptal - Copii - proprietatea `flex-grow` de DD (@Diegue) pe CodePen.

Flex Shrink

Similar cu flex-grow , această proprietate stabilește dacă elementul este „contractabil” sau nu cu o valoare întreagă. Similar cu flex-grow , flex-shrink specifică factorul de contracție al unui articol flexibil.

Vedeți Pen Flexbox @Toptal - Copii - proprietatea `flex-shrink` de DD (@Diegue) pe CodePen.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

Baza Flex

Această proprietate este utilizată pentru a defini dimensiunea inițială a unui element înainte ca spațiul disponibil să fie distribuit și elementele să fie ajustate în consecință.

Sugestie: flex-basis nu acceptă calc() și box-sizing: border-box în fiecare browser, așa că recomand să utilizați width dacă trebuie să utilizați una dintre acestea (rețineți că va trebui să setați flex-basis: auto; ).

Vedeți Pen Flexbox @Toptal - Copii - proprietatea `flex-basis` de DD (@Diegue) pe CodePen.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

Contracta

Puteți combina proprietățile flex-grow , flex-shrink și flex-basis într-o singură proprietate: flex , după cum urmează:

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

Sugestie: Dacă intenționați să utilizați flex , asigurați-vă că definiți fiecare valoare (chiar dacă doriți să utilizați valori implicite), deoarece unele browsere ar putea să nu le recunoască (o eroare comună este legată de faptul că nu ați definit valoarea flex-grow ).

Aliniați Sinele

Această proprietate este similară cu align-items dar efectul este aplicat individual fiecărui element. Valorile posibile sunt:

• flex-start: aliniază vertical elementul cu partea de sus a ambalajului.
• flex-end: aliniază vertical elementul la partea de jos a ambalajului.
• center: centrează vertical elementul în înveliș (în sfârșit, o modalitate simplă de a realiza acest lucru!).
• stretch (implicit): Întinde elementul pentru a ocupa întreaga înălțime a învelișului (când este aplicat pe un rând) sau lățimea completă a învelișului (când este aplicat pe o coloană).
• linie de bază: Aliniază elementele în funcție de liniile lor de bază reale.

Vedeți Pen Flexbox @Toptal - Copii - proprietatea `align-self` de DD (@Diegue) pe CodePen.

Ordin

Unul dintre cele mai bune lucruri incluse în Flexbox este capacitatea de a reordona elemente (folosind proprietatea de order ) fără a fi nevoie să modificați DOM-ul sau să utilizați JavaScript. Modul în care funcționează proprietatea order este foarte simplu. În același mod în care z-index controlează ordinea în care sunt randate elementele, order controlează ordinea în care elementele sunt poziționate în wrapper; adică elementele cu o valoare de order inferioară (care poate fi chiar negativă, de altfel) sunt poziționate înaintea celor cu o valoare de order mai mare.

Vedeți Pen Flexbox @Toptal - Copii - proprietatea `order` de DD (@Diegue) pe CodePen.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

Împreună totul: Exemple de utilizări ale Flexbox

Când vine vorba de proiectarea machetelor, Flexbox dezlănțuie o lume de posibilități. Mai jos, puteți găsi câteva exemple de utilizări ale proprietăților Flexbox.

Componenta de aliniere verticală

Cu Flexbox, puteți alinia orice pe verticală, inclusiv mai multe elemente simultan. Fără Flexbox, trebuia să utilizați tehnici de poziționare sau de tip tabel care ne obligau să creăm un copil care să conțină mai multe elemente. Dar cu Flexbox, puteți lăsa în urmă aceste tehnici plictisitoare și fragile și pur și simplu definiți câteva proprietăți în ambalaj și atât, indiferent de câte ori se modifică conținutul din interiorul containerului sau tipul de modificare!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ } 

Vezi Pen Flexbox @Toptal - Utilizări reale pe care le putem oferi - Alinierea verticală de către DD (@Diegue) pe CodePen.

Jumătate/jumătate Aspect

Un aspect „jumătate/jumătate” este un aspect la înălțime completă cu două coloane, fiecare având conținutul centrat vertical. De obicei, este implementat „deasupra paginii” (adică înainte ca utilizatorii să deruleze în jos după încărcarea paginii).

Folosind tehnici mai tradiționale, puteți crea acest aspect cu elemente plutitoare (cu lățimea de 50% fiecare), curățând flotoarele în înveliș („clearfix” :before și :after , overflow: hidden , sau un <div> cu clear: both; în cele din urmă). Cu toate acestea, este multă muncă și rezultatul nu este la fel de stabil ca ceea ce oferă Flexbox.

În următorul fragment de cod, veți vedea cât de ușor este să setați aspectul și, de asemenea, cum copiii devin și ambalaje Flexbox, deoarece totul este și aliniat vertical.

Înveliș exterior:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

Învelișuri interioare:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ } 

Vedeți Pen Flexbox @Toptal - Utilizări reale pe care le putem oferi - Secțiunea Half-bleed de DD (@Diegue) pe CodePen.

Butoane pentru bara de navigare la lățime completă

O bară de navigare cu lățime completă distribuie spațiul în mod egal în același rând de elemente din bara de navigare, indiferent de numărul de elemente.

În exemplul de mai jos, există și câteva butoane iconice fără acest comportament, demonstrând că le puteți combina pe cele două în orice mod doriți. Fără Flexbox, realizarea acestor tipuri de machete ar fi necesitat cod JavaScript pentru a calcula spațiul disponibil și apoi a-l distribui programatic, în funcție de butoanele care se întind și care nu.

Flexbox face acest lucru mult mai simplu.

Proprietățile învelișului:

 .navbar { display: flex; }

Proprietăți pentru copii care se întind:

 .navbar-item { flex-grow: 1; /* They will grow */ }

Proprietăți copii care nu se întind:

 .navbar-other { flex-grow: 0; // They won't grow } 

Vedeți Pen Flexbox @Toptal - Utilizări reale pe care le putem oferi - Bara de navigare a butoanelor cu sânge complet de la DD (@Diegue) pe CodePen.

Blurbs

De câte ori a trebuit să implementați un set de casete de informații cu pictograme și text în diferite proiecte?

Această distribuție de elemente este utilă în principal în marketingul digital, dar poate avea și alte utilizări în dezvoltarea de software. Cu puterea Flexbox, puteți seta un fel de grilă și, de asemenea, puteți alinia elemente, indiferent de câte sunt.

Proprietățile învelișului:

 .wrapper { display: flex; flex-wrap: wrap; }

Proprietăți ale copilului:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

Pentru fereastra de vizualizare pentru tabletă și mobilă, lățimea variază între 50% și 100%.

Vezi Pen Flexbox @Toptal - Utilizări reale pe care le putem oferi - Blurbs de DD (@Diegue) pe CodePen.

Îmbunătățirea compatibilității între browsere

Sintaxa pentru Flexbox s-a schimbat de mai multe ori în diferite versiuni de browser. Aceasta poate fi o problemă atunci când implementați un aspect cu Flexbox și încercați să acceptați browsere web mai vechi, în special versiuni mai vechi de Internet Explorer.

Din fericire, multe tehnici și soluții pentru ca codul să funcționeze în cea mai largă gamă de browsere web sunt enumerate în Flexbugs, care este o resursă excelentă. Dacă urmați informațiile de pe site-ul respectiv, veți avea rezultate mai bune și consistente în diferite browsere web.

Sarcinile de prefix sunt deosebit de utile în acest sens. Pentru a automatiza prefixarea regulilor CSS, puteți alege unul dintre următoarele instrumente:

Rubin:

• Sine de autoprefixare
• Autoprefixer intermediar

Node.js:

• Autoprefixer PostCSS
• Grunt Autoprefixer
• Autoprefixer Gulp

Începeți să construiți layout-uri inteligente

Flexbox este un instrument excelent pentru a ne accelera, lustrui și scala munca. Limita este doar în imaginația dezvoltatorului.

Dacă aveți nevoie de ajutor vizual pentru a vă planifica următorul aspect, puteți încerca acest loc de joacă frumos:

Vedeți Pen Flexbox @Toptal - Locul de joacă Flexbox de DD (@Diegue) pe CodePen.

Deschideți-l într-o fereastră nouă.

Odată cu adoptarea din ce în ce mai mare a browserelor web moderne de către majoritatea utilizatorilor, utilizarea Flexbox vă va permite să creați cu ușurință machete uimitoare, fără a fi nevoie să vă aprofundați în codul JavaScript dezordonat sau să creați un CSS kludgy.