CSS Flexbox: Controlul Layout-ului Modern

Flexbox este o metodă modernă și eficientă de a crea layout-uri responsive în CSS. Spre deosebire de tehnicile clasice, Flexbox oferă control pe axa principală și secundară, aliniere precisă și distribuție automată a spațiului. În acest tutorial vom explora pas cu pas cum funcționează Flexbox și cum îl putem folosi în proiecte reale.

1. display

Activează modul Flexbox pe un container.

display: flex - activează Flexbox pe elementul curent
display: inline-flex - activează Flexbox, dar containerul se comportă ca un element inline

🔧 Exemplu live

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

.container {
  display: flex;
  background: #eee;
  padding: 20px;
}

.box {
  background: #4a90e2;
  color: white;
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}

2. flex-direction

Controlează direcția în care sunt așezate elementele în container.

row - orizontal, de la stânga la dreapta (implicit)
row-reverse - orizontal, de la dreapta la stânga
column - vertical, de sus în jos
column-reverse - vertical, de jos în sus

🔧 Exemplu live

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse; /* schimbă între row, row-reverse, column, column-reverse */
  background: #f0f0f0;
  padding: 20px;
  height: 200px;
}

.box {
  background: #007bff;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

3. justify-content

Controlează distribuția elementelor pe axa principală (orizontală dacă flex-direction: row, verticală dacă flex-direction: column).

flex-start - aliniere la începutul axei
flex-end - aliniere la finalul axei
center - elementele sunt centrate
space-between - spațiu egal între elemente, fără margini
space-around - spațiu egal în jurul fiecărui element
space-evenly - spațiu egal între elemente și marginile containerului

🔧 Exemplu live

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
  justify-content: space-evenly; /* schimbă între flex-start, flex-end, center, space-between, space-around, space-evenly */
  background: #f0f0f0;
  padding: 20px;
}

.box {
  background: #28a745;
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

4. align-items

Controlează alinierea elementelor pe axa secundară (verticală dacă flex-direction: row, orizontală dacă flex-direction: column).

stretch - elementele se întind pe toată axa secundară (implicit)
flex-start - aliniere la începutul axei secundare
flex-end - aliniere la finalul axei secundare
center - elementele sunt centrate pe axa secundară
baseline - aliniere după linia de bază a textului

🔧 Exemplu live

<div class="container">
  <div class="box">Short</div>
  <div class="box tall">Tall</div>
  <div class="box">Mid</div>
</div>

.container {
  display: flex;
  align-items: flex-end; /* schimbă între stretch, flex-start, flex-end, center, baseline */
  background: #fff3cd;
  padding: 20px;
  height: 200px;
}

.box {
  background: #ffc107;
  color: black;
  padding: 10px;
  margin: 5px;
  border-radius: 6px;
}

.tall {
  height: 100px;
}

5. flex-wrap

Controlează dacă elementele din container se înfășoară pe mai multe linii atunci când nu mai au loc pe axa principală.

nowrap - toate elementele rămân pe o singură linie (implicit)
wrap - elementele se înfășoară pe linii noi când nu mai au loc
wrap-reverse - ca wrap, dar liniile sunt inversate

🔧 Exemplu live

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* schimbă între nowrap, wrap, wrap-reverse */
  background: #e0f7fa;
  padding: 10px;
  width: 300px;
}

.box {
  background: #00acc1;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 120px;
  text-align: center;
  border-radius: 6px;
}

6. align-content

Controlează alinierea liniilor multiple pe axa secundară, dar funcționează doar când există mai multe rânduri (deci flex-wrap trebuie să fie activ).

flex-start - liniile sunt aliniate la începutul axei secundare
flex-end - liniile sunt aliniate la finalul axei secundare
center - liniile sunt centrate
space-between - spațiu egal între linii
space-around - spațiu egal în jurul fiecărei linii
stretch - liniile se întind pe toată axa secundară (implicit)

🔧 Exemplu live

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* schimbă între flex-start, flex-end, center, space-between, space-around, stretch */
  background: #f3e5f5;
  padding: 10px;
  height: 300px;
}

.box {
  background: #9c27b0;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 100px;
  text-align: center;
  border-radius: 6px;
}

7. order

Controlează ordinea de afișare a elementelor într-un container Flexbox, fără a modifica ordinea lor în HTML.

order: 0 - valoarea implicită
order: <număr> - cu cât numărul e mai mic, cu atât elementul apare mai devreme

🔧 Exemplu live

<div class="container">
  <div class="box" style="order: 2;">Primul în HTML</div>
  <div class="box" style="order: 1;">Al doilea în HTML</div>
  <div class="box" style="order: 0;">Al treilea în HTML</div>
</div>

.container {
  display: flex;
  gap: 10px;
  background: #e8f5e9;
  padding: 20px;
}

.box {
  background: #66bb6a;
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

8. flex-grow

Controlează cât de mult poate crește un element pentru a ocupa spațiul disponibil în container.

flex-grow: 0 - elementul nu crește (implicit)
flex-grow: 1 - elementul crește proporțional cu spațiul disponibil
flex-grow: >1 - elementul crește mai mult decât celelalte

🔧 Exemplu live

<div class="container">
  <div class="box" style="flex-grow: 1;">Grow 1</div>
  <div class="box" style="flex-grow: 2;">Grow 2</div>
  <div class="box" style="flex-grow: 3;">Grow 3</div>
</div>

.container {
  display: flex;
  background: #fffde7;
  padding: 20px;
}

.box {
  background: #fbc02d;
  color: black;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

9. flex-shrink

Controlează cât de mult se micșorează un element când spațiul este limitat.

flex-shrink: 1 - elementul se micșorează proporțional (implicit)
flex-shrink: 0 - elementul nu se micșorează
flex-shrink: >1 - elementul se micșorează mai agresiv

🔧 Exemplu live

<div class="container">
  <div class="box" style="flex-shrink: 1;">Shrink 1</div>
  <div class="box" style="flex-shrink: 0;">Shrink 0</div>
  <div class="box" style="flex-shrink: 2;">Shrink 2</div>
</div>

.container {
  display: flex;
  width: 300px;
  background: #fce4ec;
  padding: 10px;
}

.box {
  background: #ec407a;
  color: white;
  padding: 20px;
  width: 150px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

10. flex-basis

Definește dimensiunea de bază a unui element înainte ca spațiul disponibil să fie distribuit. Este similar cu width, dar funcționează în contextul Flexbox.

auto - folosește dimensiunea definită de conținut sau width
<lungime> - ex: flex-basis: 200px, setează o dimensiune fixă
0 - ignoră dimensiunea naturală și distribuie spațiul în funcție de flex-grow

🔧 Exemplu live

<div class="container">
  <div class="box" style="flex-basis: 100px;">100px</div>
  <div class="box" style="flex-basis: 200px;">200px</div>
  <div class="box" style="flex-basis: 0;">0</div>
</div>

.container {
  display: flex;
  background: #e3f2fd;
  padding: 20px;
}

.box {
  background: #2196f3;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

11. flex (shorthand)

Este o prescurtare pentru flex-grow, flex-shrink și flex-basis.

flex: 1 - echivalent cu flex-grow: 1; flex-shrink: 1; flex-basis: 0%
flex: 0 1 auto - valoarea implicită
flex: <grow> <shrink> <basis> - ex: flex: 2 0 150px

🔧 Exemplu live

<div class="container">
  <div class="box" style="flex: 1;">flex: 1</div>
  <div class="box" style="flex: 2;">flex: 2</div>
  <div class="box" style="flex: 3;">flex: 3</div>
</div>

.container {
  display: flex;
  background: #f1f8e9;
  padding: 20px;
}

.box {
  background: #8bc34a;
  color: white;
  padding: 20px;
  margin: 5px;
  text-align: center;
  border-radius: 6px;
}

12. align-self

Permite unui element să-și controleze alinierea pe axa secundară, suprascriind align-items din container.

auto - moștenește valoarea de la align-items
flex-start - aliniere la începutul axei secundare
flex-end - aliniere la finalul axei secundare
center - centrat pe axa secundară
baseline - aliniere după linia de bază a textului
stretch - se întinde pe toată axa secundară (implicit)

🔧 Exemplu live

<div class="container">
  <div class="box" style="align-self: flex-start;">Start</div>
  <div class="box" style="align-self: center;">Center</div>
  <div class="box" style="align-self: flex-end;">End</div>
</div>

.container {
  display: flex;
  align-items: stretch;
  background: #ede7f6;
  padding: 20px;
  height: 200px;
}

.box {
  background: #673ab7;
  color: white;
  padding: 20px;
  margin: 5px;
  border-radius: 6px;
}

Flexbox Cheat Sheet

Proprietate	Valori	Descriere
`display`	flex, inline-flex	Activează modul Flexbox
`flex-direction`	row, row-reverse, column, column-reverse	Direcția elementelor în container
`justify-content`	flex-start, flex-end, center, space-between, space-around, space-evenly	Aliniere pe axa principală
`align-items`	stretch, flex-start, flex-end, center, baseline	Aliniere pe axa secundară
`flex-wrap`	nowrap, wrap, wrap-reverse	Înfășurarea elementelor pe mai multe linii
`align-content`	flex-start, flex-end, center, space-between, space-around, stretch	Alinierea liniilor multiple
`order`	0, 1, 2, ...	Ordinea de afișare
`flex-grow`	0, 1, 2, ...	Creșterea în funcție de spațiul disponibil
`flex-shrink`	0, 1, 2, ...	Micșorarea când spațiul e limitat
`flex-basis`	auto, 0, px, %	Dimensiunea de bază
`flex`	shorthand: grow shrink basis	Prescurtare pentru cele trei de mai sus
`align-self`	auto, flex-start, flex-end, center, baseline, stretch	Aliniere individuală pe axa secundară

Exemplu: Layout de carduri responsive

Un layout de carduri care se adaptează automat la dimensiunea ecranului, folosind flex-wrap și flex-basis.

🔧 Exemplu live

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
}

.card {
  flex: 1 1 200px;
  background: #03a9f4;
  color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

Exemplu: Navbar cu Flexbox

Un navbar simplu, aliniat pe orizontală, cu logo în stânga și linkuri în dreapta, folosind display: flex și justify-content: space-between.

🔧 Exemplu live

<nav class="navbar">
  <div class="logo">LOGO</div>
  <ul class="nav-links">
    <li><a href="#">Acasă</a></li>
    <li><a href="#">Despre</a></li>
    <li><a href="#">Servicii</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222;
  padding: 15px 30px;
  color: white;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.nav-links a:hover {
  text-decoration: underline;
}

Layout complet pentru mini site

Un exemplu solid de structură web — cu header, navigație, sidebar, conținut principal și footer — construit cu HTML și CSS curat. Ideal pentru proiecte simple, dashboard-uri sau site-uri personale. Totul e modular și ușor de extins cu PHP, JS sau framework-uri moderne.

Layout complet cu logo și meniu

<header class="site-header">
  <div class="logo">LOGO</div>
  <nav class="main-nav">
    <ul>
      <li><a href="#">Acasă</a></li>
      <li><a href="#">Despre</a></li>
      <li><a href="#">Servicii</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<div class="page-layout">
  <aside class="sidebar">
    <h3>Linkuri utile</h3>
    <ul>
      <li><a href="#">Dashboard</a></li>
      <li><a href="#">Profil</a></li>
      <li><a href="#">Mesaje</a></li>
      <li><a href="#">Setări</a></li>
      <li><a href="#">Statistici</a></li>
    </ul>
  </aside>

  <main class="content">
    <h2>Bine ai venit!</h2>
    <p>Aici este zona principală de conținut. Poți adăuga articole, imagini, formulare sau orice altceva.<p>
    <section>
      <h3>Secțiune specială</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.<p>
    </section>
  </main>
</div>

<footer class="site-footer">
  <p>&copy; 2025 Site Demo. Toate drepturile rezervate.<p>
</footer>

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #263238;
  color: white;
  padding: 15px 30px;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
}

.page-layout {
  display: flex;
  min-height: 80vh;
}

.sidebar {
  width: 250px;
  background: #9fa6a9ff;
  color: white;
  padding: 20px;
}

.sidebar h3 {
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.content {
  flex-grow: 1;
  padding: 30px;
  background: white;
}

.site-footer {
  background: #263238;
  color: white;
  text-align: center;
  padding: 15px;
}

Flexbox ți-a dat controlul pe orizontală și verticală, dar dacă vrei să orchestrezi layout-uri complexe ca un arhitect web, e timpul să treci la CSS Grid — unde fiecare rând și coloană e sub comanda ta. Hai să începem

🧠 Quiz - CSS Flexbox: Controlul Layout-ului Modern

CSS Grid ➔