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.

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;:

Locul de joacă CSS nu are proprietăți flexibile

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:

Afișarea locului de joacă CSS stil implicit flex

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;

direcție flexibilă: exemplu de inversare a coloanei

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.