Generator Flexbox CSS

Exemple de layout Flexbox

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Centrare perfectă Un element în mijlocul containerului, pe ambele axe.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

Bară de navigare Primul și ultimul element lipite de margini, restul distribuite între ele.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

Elemente pe coloană Unul sub altul, întinse pe toată lățimea.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

Carduri pe mai multe rânduri Cu wrap, elementele care nu mai încap trec pe rândul următor.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
}

Spații egale space-evenly face egale și spațiile de la margini.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 8px;
}

Aliniate jos Elemente de înălțimi diferite, aliniate la baza containerului.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 8px;
}

Ordine inversă row-reverse afișează elementele de la dreapta la stânga, fără să schimbi HTML-ul.

.container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

Cum folosești generatorul de Flexbox

Alege direcția: pe rând (row) sau pe coloană (column).
Aliniază elementele pe axa principală cu justify-content și pe axa secundară cu align-items.
Activează flex-wrap: wrap dacă vrei ca elementele să treacă pe rândul următor.
Schimbă numărul de elemente ca să vezi cum se comportă layout-ul.

Cele două axe

Flexbox lucrează pe o axă principală, dată de flex-direction, și pe o axă secundară, perpendiculară pe ea. La row, axa principală e orizontală; la column, e verticală. De aceea justify-content: center centrează pe orizontală la row și pe verticală la column.

Centrarea perfectă

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

Bară de navigare

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

space-between lipește primul și ultimul element de margini; space-around pune spații egale în jurul fiecărui element; space-evenly face toate spațiile egale, inclusiv cele de la margini.

Întrebări frecvente

Când folosesc Flexbox și când Grid?

Flexbox e potrivit pentru o singură direcție: un rând de butoane, o bară de navigare, un card cu elementele unul sub altul. Grid e potrivit când controlezi rânduri și coloane în același timp. Vezi și generatorul de CSS Grid.

Ce face align-content?

Aliniază rândurile între ele, nu elementele. Are efect doar când există mai multe rânduri, adică cu flex-wrap: wrap și suficiente elemente.

De ce elementele mele ies din container?

Cu flex-wrap: nowrap (implicit), elementele stau pe un singur rând chiar dacă nu încap. Pune flex-wrap: wrap sau permite-le să se micșoreze cu min-width: 0.