Flexbox – ghid complet cu exemple

Flexbox (Flexible Box Layout) este un modul CSS care facilitează alinierea și distribuirea spațiului între elemente într-un container, chiar și atunci când dimensiunile acestora sunt necunoscute sau dinamice. Acest tutorial include explicații concise și multe exemple vizuale pe care le poți copia rapid.

Sintaxă de bază

.container {
  display: flex; /* sau inline-flex */
}
.item {
  flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */
}

Setează display:flex pe părinte pentru a activa contextul flex; copiii devin „flex items”.

Proprietăți pe container

Proprietate	Valori	Ce face
`flex-direction`	row \| row-reverse \| column \| column-reverse	Direcția axei principale
`flex-wrap`	nowrap \| wrap \| wrap-reverse	Permite elementelor să treacă pe rânduri/coloane noi
`flex-flow`	direction wrap	Shortcut pentru direcție + wrap
`justify-content`	flex-start \| center \| space-between \| space-around \| space-evenly ...	Aliniere pe axa principală
`align-items`	stretch \| flex-start \| center \| baseline \| flex-end	Aliniere pe axa transversală
`align-content`	stretch \| flex-start \| center \| space-between \| space-around \| flex-end	Aliniere a liniilor (când avem wrap)
`gap`	lungime	Spațiu între itemi (row-gap / column-gap)

Exemplu: flex-direction

.flex-demo{display:flex;}
.flex-demo.row{flex-direction:row;}
.flex-demo.col{flex-direction:column;}

Exemplu: justify-content

.container{display:flex;justify-content:space-between;}

Exemplu: align-items & gap

Proprietăți pe item

Proprietate	Valori	Ce face
`order`	număr întreg	Schimbă ordinea vizuală (implicit 0)
`flex-grow`	număr	Cât spațiu suplimentar ia un item
`flex-shrink`	număr	Cât de mult se micșorează când nu e loc
`flex-basis`	auto \| lungime \| %	Dimensiunea inițială înainte de distribuirea spațiului
`flex`	grow shrink basis	Shortcut pentru cele trei de mai sus
`align-self`	auto \| flex-start \| center \| flex-end \| stretch \| baseline	Aliniere individuală pe axa transversală

Exemplu: order

1 (order 3)

2 (order 1)

3 (order 2)

.item1{order:3}
.item2{order:1}
.item3{order:2}

Exemplu: flex-grow / flex-basis

.item-a{flex:1 1 80px}
.item-b{flex:2 1 80px} /* Dublu spațiu față de A */
.item-c{flex:1 1 80px}

Exemplu: align-self

start

center

end (moștenit)

Layout-uri comune cu Flexbox

1. Navbar simplu

.nav-bar{display:flex;justify-content:space-between;align-items:center;}

2. Carduri responsive (3 pe rând → 2 → 1)

Card 1

Card 2

Card 3

Card 4

Card 5

.cards{display:flex;flex-wrap:wrap;gap:1rem;}
.card{flex:1 1 calc(33% - 1rem);} /* media queries pt. 50%/100% */

3. „Holy Grail Layout” (două sidebars + conținut)

Content

.holy-grail{display:flex;}
.hg-side{flex:0 0 200px}
.hg-main{flex:1}

4. Centrare perfectă pe orizontală și verticală

Centrat!

.center-wrapper{display:flex;justify-content:center;align-items:center;}

5. Footer lipit jos (sticky footer)

body{min-height:100vh;display:flex;flex-direction:column;}
main{flex:1}
footer{margin-top:auto}

Folosești flex-direction:column pe body și împingi footer-ul cu margin-top:auto.

Concepte avansate & capcane uzuale

Axe & spații libere

Axa principală (main axis) este definită de flex-direction. Axa transversală (cross axis) e perpendiculară. justify-content aliniază pe axa principală, align-items pe cea transversală.

Auto margins

margin-left:auto (sau top/right/bottom, depinde de axă) împinge un element la capătul liber al containerului, util în navbars.

.nav{display:flex}
.nav a:last-child{margin-left:auto}

Min/Max size & overflow

Flexbox va ignora uneori width/height în favoarea lui flex-basis. Fii explicit: flex:0 0 200px dacă vrei o lățime fixă.

Shorthand-ul `flex`

flex:1 ≈ 1 1 0
flex:auto ≈ 1 1 auto
flex:none ≈ 0 0 auto

Performanță & accesibilitate

Ordinea vizuală (order) nu schimbă ordinea în DOM: cititoarele de ecran, tab focus sau scroll anchoring pot rămâne pe ordinea originală.

Pattern-uri utile

Media object (avatar + conținut)

Conținut lung aici, text, etc.

.media{display:flex;align-items:flex-start}
.media img{flex:0 0 64px;border-radius:50%}
.media-body{flex:1;padding:0 .5rem}

Sidebar fix + conținut fluid

Conținut

Buton grup (button group)

Exerciții practice

Recreează o bară de navigație cu logo la stânga și buton „Login” la dreapta cu margin-left:auto.
Fă un grid de carduri responsive doar cu Flexbox (fără Grid), 4 / 2 / 1 pe rând.
Construiește un layout tip chat: listă de mesaje într-o coloană, input fix jos.
Implementează un sticky footer doar cu flex-direction:column.
Joacă-te cu order pentru a reordona cardurile pe mobil.

Poți verifica soluțiile cu inspectorul și devtools.

Cheatsheet rapid

Țintă	Cod	Rezultat
Centrare totală	`display:flex;justify-content:center;align-items:center;`	Element centrat perfect
Element întins pe restul spațiului	`flex:1`	Umple spațiul disponibil
Dimensiune fixă	`flex:0 0 200px;`	Lățime fixă 200px
Split 2 coloane egale	`.col{flex:1}`	Fiecare ia 50%
Rânduri multiple	`flex-wrap:wrap`	Itemii trec pe linie nouă
Spațiu egal între itemi	`justify-content:space-between`	Primul la stânga, ultimul la dreapta

Întrebări frecvente

De ce nu funcționează height:100% într-un item?

Pentru că înălțimea părintelui nu este definită. În flex, cel mai sigur este să folosești align-stretch sau calcule cu viewport (vh).

De ce elementele mele depășesc containerul?

Verifică flex-shrink (implicit 1). Dacă itemul are conținut inflexibil (imagine mare), setează dimensiuni max și overflow.

Când folosesc Grid în loc de Flexbox?

Flexbox = o dimensiune (un singur rând/coloană), Grid = două dimensiuni (rânduri + coloane) pentru layout-uri complexe.

Compatibilitate & fallback

Flexbox este suportat în toate browserele moderne. Probleme pot apărea pe versiuni vechi de IE/Android Browser. Pentru compatibilitate maximă folosește prefixări automate (autoprefixer).

Debugging tips

Activează Layout > Flexbox overlay în devtools (Chrome/Firefox) pentru a vedea axele și spațiile.
Aplică temporar outline:1px solid red pe itemi pentru a vedea cum se dimensionează.
Verifică min-width/min-height pe itemi care nu se micșorează cum vrei.

Resurse & sfaturi

Inspectorul din browser îți arată axele Flexbox (Firefox are un vizualizator foarte bun).
Folosește gap în loc de margin între itemi când e posibil.
Nu combina float cu flex decât dacă știi exact ce faci.
Pentru layout-uri foarte complicate pe 2D, ia în calcul CSS Grid.