Cautare in site

Articol

CSS3 FlexBox

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;

Centrare continut cu FlexBox

Centrarea elementelor pe ambele axe poate fi folosita pentru crearea unei sectiuni hero in care continutul sa fie centrat pe ambele axe.

Evidentierea unei parti din continut

Cu proprietatea flex-grow se evidentiaza unul sau mai multe elemente child.

Dimensiunea spatiului alocat elementului evidentiat se largeste pe axa principala, fie ca aceasta este setata pe row sau column.

FlexBox CSS3 - flex grow

Proprietatea flex-grow gestioneaza evidentierea unui element child, ca tabelul de pret central din imaginea de mai sus.

Creeaza layout-uri web responsive cu cel mai utilizat framework: Bootstrap

Curs video online: 25 de videoclipuri HD on demand

40.8% Nou Promo
Curs Bootstrap Online
26

Curs Bootstrap Online

245.00 lei 145.00 lei

Construieste site-uri web Responsive cu cel mai utilizat framework | 25 videoclipuri on demand HD | 4 exemple de layout descarcabile | fise pdf

Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.