CSS Flexbox #1. Crearea primului dvs. aspect Flexbox

La sfârșitul anului 2018, am publicat o carte despre CSS Grid, instrumentul de layout care revoluționează web-designul frontend. CSS Grid este în întregime nativ pentru CSS și vă permite să creați un sistem de aspect bazat pe grilă, folosind coloane și rânduri.

„CSS Grid Explained” a devenit imediat una dintre cele mai bine vândute cărți ale noastre. Așa că lucrăm la o actualizare și o extindere amplă pentru cartea respectivă. De asemenea, începem să producem o nouă carte, „Flexbox Explained”. Flexbox este strâns legat de CSS Grid, dar există diferențe notabile:

• Flexbox este un model de aspect unidimensional. Poate gestiona fie coloane, fie rânduri.
• CSS Grid este un model de aspect bidimensional. Poate gestiona atât coloanele, cât și rândurile.

În următoarele câteva săptămâni, vom publica o serie de tutoriale Flexbox pe măsură ce scriem „Flexbox Explained”. Acest prim tutorial demonstrează conceptele de bază ale CSS Flexbox cu exemple practice.

Introducere în Flexbox

Specificația CSS Flexbox descrie un aspect cu articole ( flex-items ) în interiorul unui container ( flex-container ). Aceste articole pot crește sau micșora în lățime și/sau înălțime, în funcție de spațiul disponibil al containerului. Elementele se „flexează” pentru a se potrivi cât mai bine în containerul părinte.

Aceste articole „flexate” pot fi așezate în orice direcție (axă în linie sau axă bloc), oferind astfel multă flexibilitate atunci când se schimbă dimensiunea (lățimea sau înălțimea) ecranului sau orientarea acestuia.

Puteți arunca o privire asupra specificației Flexbox W3C făcând clic pe acest link.

Pasul 1. Creați codul HTML

Să începem acest exemplu prin crearea unui fișier HTML cu un cod exemplu. Ți-am pregătit ceva HTML - este un container cu 3 elemente copil.

• Deschideți editorul de cod preferat.
• Creați un fișier HTML gol.
• Vizitați această pagină și copiați codul HTML
• Lipiți acel cod în fișierul HTML.

Pasul 2. Creați CSS-ul

Acum că avem un container cu 3 elemente, să adăugăm ceva stil.

• Creați un fișier CSS numit style.css. . Plasați acest fișier în același folder cu fișierul HTML. Linkul către acest fișier CSS se află deja în eticheta fișierului dvs. HTML
• Copiați și inserați acest cod, care este disponibil și pe Codepen:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Această imagine arată cum va apărea codul dvs. când deschideți fișierul HTML într-un browser. Cele 3 articole copil sunt la fel de largi ca și containerul lor principal. Înălțimea este determinată de conținutul fiecărui articol. Observați umplutura de 2rem (aproximativ 32px pe un ecran de desktop) pe toate părțile.

Pasul 3. Stilurile CSS Flexbox

Acum este timpul să începeți porțiunea Flexbox a acestui tutorial.

• Editați fișierul CSS și adăugați acest cod:

 .container { display: flex; }

Această imagine arată cum va arăta codul dvs. acum:

Ce s-a schimbat? Din punct de vedere tehnic, containerul părinte este acum un flex-container . Elementele copil s-au transformat în flex-items .

De ce s-a schimbat dimensiunea containerelor? Articolele flexibile nu sunt la fel de largi ca containerul lor principal. Ele sunt acum la fel de largi ca și conținutul din interiorul lor. Elementele flex-items apar ca elemente plutitoare la stânga. Se comportă ca elemente inline .

Pentru a vedea clar lățimea containerului părinte, puteți aplica o background-color :

• Editați codul CSS și adăugați acest cod:

 .container { display: flex; background-color: #f5ca3c; }

Iată cum apare acum containerul:

Ați observat deja că flex-container se comportă (în mare parte) ca un element la nivel de bloc. Totuși, facem și containerul să se comporte ca un element la nivel inline. Pentru a face acest lucru, schimbăm valoarea proprietății de display în inline-flex .

• Editați codul CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

Containerul flexibil este acum un element la nivel inline, așa cum puteți vedea în această imagine:

Înainte de a continua acest tutorial, să schimbăm comportamentul la un element la nivel de bloc.

• Editați codul CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Pasul #4. Schimbarea rândurilor Flexbox în coloane

Până acum, am creat un flex-container . Am văzut, de asemenea, cum se comportă copiii acestui container atunci când sunt transformați în flex-items .

Acum să învățăm cum să schimbăm direcția aspectului nostru. Direcția implicită a unui flex-container este bazată pe rând. Cu toate acestea, puteți modifica acest comportament cu proprietatea flex-direction .

• Editați codul CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

După actualizarea codului, nu veți vedea nicio modificare deoarece flex-direction: row este valoarea implicită. Să facem o schimbare cu adevărat vizibilă: editați direcția flex-container către column .

• Editați codul CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Această imagine următoare arată modificarea aspectului dvs.:

Acum, direcția flex-container se bazează pe axa blocului (coloană). Elementele flex-items sunt aliniate de sus în jos și fiecare dintre aceste articole ocupă toată lățimea containerului său părinte. Deci, se comportă ca elemente de bloc.

Acum, s-ar putea să începeți să puneți întrebări în acest moment: „ Hei, aspectul meu acum arată exact la fel ca primul aspect din acest tutorial! ” Este adevărat. Din punct de vedere vizual, nu există nicio diferență între acest aspect actual cu un flex-container și primul aspect al acestui exemplu cu un container bloc.

Cu toate acestea, acum avem mai mult control. De exemplu, puteți inversa direcția elementelor flex-items cu proprietățile row-reverse și column-reverse .

• Editați codul CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Această imagine arată cum va arăta aspectul după această nouă actualizare:

Pentru a vedea elementele flex-items un rând, modificați valoarea proprietății flex-direction .

• Editați codul CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Rezumat Flexbox

Felicitări! Ați învățat cum să declarați un flex-container . Ați văzut cum se comportă flex-items în funcție flex-direction aplicată containerului lor părinte ( row sau column ). De asemenea, știți cum să inversați ordinea flex-items .

Toate aceste modificări se fac cu CSS, așa că nu va afecta structura de markup HTML a site-ului dvs. Acesta este unul dintre avantajele utilizării Flexbox. Inversarea ordinii elementelor flex-items este doar una dintre caracteristicile acestui modul CSS. Mai sunt multe de învățat despre Flexbox, așa că uitați-vă la Partea #2 a acestui tutorial în câteva zile.

Mai multe tutoriale din această serie

• CSS Flexbox #2. Cum să utilizați proprietatea justify-content
• CSS Flexbox #3. Proprietatea align-items
• CSS Flexbox #4. Proprietatea flex-grow