CSS3 FlexBox

Ce este Flexbox

Este un model de layout in CSS3. Are scopul de a oferi un mod mai eficient pentru realizarea layout-urilor web, de a alinia si distribui spatiul intre elemente inauntrul unui container chiar si atunci cand dimensiunea nu este cunoscuta sau este dinamica.

Intr-un layout construit cu flexbox proprietatile elementelor (largime, inaltime, ordine de vizualizare) se pot schimba pentru a ocupa in mod optim spatiul disponibil. Un container flex expandeaza elementele pentru a ocupa spatiul gol sau le reduce pentru preveni un overflow.

In ceea ce priveste directia, layout-urile flexbox nu sunt directionale, cum este cazul elementelor block (care se dezvolta in verticala) sau elementelor inline (care se dezvolta pe orizontala).

Cand se foloseste Flexbox

Layout-urile bazate pe clasicile Grids sunt perfecte pentru pagini si site-uri intregi. Flexbox si layout-urile bazate pe grids pot coexista pentru constructia de pagini. Specialistii recomanda sa nu il folosim pentru layout-ul intreg al paginii.

Flexbox este util pentru construirea acelor parti de layout care au nevoie de o flexibilitate sporita a elementelor (vom vedea cateva exemple mai jos) sau pentru construirea de aplicatii sau layouts pe scara mica (cum sunt paginile de landing).

Avatajele pe care le avem cu flexbox sunt: sporita flexibilitate la schimbarea orientarii dispozitivului, redimensionare, intindere sau micsorare.

Ce ne ajuta Flexbox sa facem mai usor

Flexbox ne simplifica foarte mult munca pentru ca gestioneaza in mod automat float-urile si inaltimea elementelor.

Mai jos cateva exemple de sectiuni de layout pe care le putem configura in mod eficient cu Flexbox si care erau mai greu de realizat cu alte tipologii de layout.

Module cu inaltime egala

Container-ul setat pe display: flex face ca elementele child sa aiba aceeasi inaltime ca si valoare predefinita.

Nu este nevoie sa specificam altceva pentru a obtine elemente child de aceeasi inaltime. Asta pentru ca de default proprietatea align-items este setata pe valoarea baseline, ceea ce inseamna ca elementele child iau inaltimea maxima in interiorul parintelui.

FlexBox CSS3 - elemente cu inaltime egala

Coloanele cu aceeasi inaltime pot fi folosite de exemplu pentru elemente ce au o culoare de fundal.

Centrare perfecta a continutului pe ambele axe

O operatiune destul de laborioasa cu alte tehnici.

In flexbox ajunge sa setam container-ului directia de coloana si sa centram elementele pe axa principla si transversala:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;