CSS Flexbox vă permite să vă formatați cu ușurință codul HTML așa cum nu ați știut niciodată că este posibil. Cu Flexbox vă puteți alinia pe verticală și orizontală, cu ușurință. Îți place sunetul? Da, la fel și eu.
Flexbox este, de asemenea, foarte util atunci când creați aspectul general al site-ului sau al aplicației dvs. Este ușor de învățat, bine acceptat (în toate browserele moderne) și este minunat să lucrezi cu el – ca să nu mai vorbim că nu durează mult pentru a obține elementele de bază.
Deci, să ne scufundăm chiar și să aflăm mai multe.
Table of Contents
Flexbox
Iată o listă cu proprietățile Flexbox care pot fi utilizate pentru poziționarea elementelor în CSS:
CSS care poate fi aplicat unui container
display: flexbox | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
CSS care poate fi aplicat articolelor / elementelor dintr-un container
order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Deci, acum aveți setul de instrumente. Dar s-ar putea să întrebați „Ce fac cu instrumentele mele și cum le folosesc?” Ei bine, lasă-mă să-ți arăt.
Display Flex
display: flex;
doar îi spune browserului dvs., „hei, aș dori să folosesc Flexbox cu acest container, vă rog”. Aceasta va inițializa această casetă ca un container Flex și va aplica unele proprietăți implicite Flex.
Așa arată containerul nostru fără display: flex;
:

După adăugare display: flex;
primim cele de mai jos – puteți vedea că sunt aplicate proprietățile Flex implicite, ceea ce face ca acesta să arate astfel:

Direcție flexibilă
flex-direction:
ne permite să controlăm modul în care sunt afișate articolele din container. Le doriți de la stânga la dreapta, de la dreapta la stânga, de sus în jos sau de jos în sus? Puteți face toate acestea cu ușurință setând direcția Flex a containerului.
Flexbox aplică rânduri ca implicit pentru direcție. Iată cum arată toate:
flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Flex Wrap
Flexbox implicit va încerca să încadreze toate elementele într-un singur rând. Dar puteți schimba acest lucru cu proprietatea flex-wrap. Acest lucru vă permite să alegeți dacă elementele se vor revărsa sau nu.
Există 3 proprietăți pentru flex-wrap:
:
flex-wrap: nowrap
este valoarea implicită și va încerca să se potrivească totul într-un rând de la stânga la dreapta.
flex-wrap: wrap
permite elementelor să continue pentru a crea mai multe rânduri de la stânga la dreapta.
flex-wrap: wrap-reverse
permite elementelor să fie pe mai multe rânduri, dar de această dată se afișează de la dreapta la stânga.
Flex Flow
Flex flow combină utilizarea flex-wrap
și flex-direction
într-o singură proprietate. Se folosește setând mai întâi direcția și apoi înfășurarea.
flex-flow: column wrap;
este un exemplu dacă se folosește acest lucru.
Justificați conținutul
justify-content
este o proprietate care aliniază elementele din container de-a lungul axei principale (aceasta se modifică în funcție de modul în care este afișat conținutul).
Există mai multe opțiuni pentru aceasta. Ne permite să umplem orice spațiu gol în rânduri, dar ne permite să definim modul în care dorim să-l „justificăm”.
Iată opțiunile noastre atunci când ne justificăm conținutul: flex-start | flex-end | center | space-between | space-around;
.
Aliniați elementele
Alinierea elementelor ne permite să aliniem elementele de-a lungul axei transversale. Acest lucru permite poziționarea conținutului în mai multe moduri diferite, folosind conținut justificat și aliniază elementele împreună.
align-items: flex-start | flex-end | center | baseline | stretch;
Aliniați conținutul
Aceasta este pentru alinierea elementelor cu mai multe linii. Este pentru alinierea pe axa transversală și nu va avea niciun efect asupra conținutului care este o singură linie.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Alte resurse pe Flexbox și Grid
Articole și cursuri
Ultimul CSS Flex Cheatsheet
Curs video CSS complet (include Flexbox și grilă)
Un ghid vizual pentru CSS Flexbox
Cum să creați o galerie de imagini cu grila CSS
Jocuri și aplicații
Flexbox Defense este un joc web care învață flexbox modul distractiv.
Flexbox Froggy este, de asemenea, un joc web care învață flexbox modul distractiv.
Flexbox în 5 este o aplicație web care vă permite să vedeți cum funcționează flexbox cu câteva controale simple.
Flexybox-uri este o aplicație care vă permite să vedeți mostre de cod și să modificați parametrii pentru a vedea cum funcționează vizual flexbox.
Flexbox Patters este un site web care prezintă o mulțime de exemple flexbox.