Sfaturi și trucuri CSS Flexbox

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.

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.

Videoclipuri

Flexbox Essentials

Exemple practice Flexbox

Ce Flexbox ?!