flex-wrap în CSS

flex-wrap: nowrap; /* implicit: toate pe un rând, se înghesuie sau ies din ecran */
flex-wrap: wrap;   /* coboară automat pe rândul următor când nu mai încap */
flex-wrap: wrap-reverse;

Ce face flex-wrap

În mod implicit (nowrap), Flexbox va înghesui toate elementele pe o singură linie, oricât de multe ar fi, micșorându-le lățimea sau ieșind în afara ecranului.

Prin activarea flex-wrap: wrap, elementele care nu mai au loc pe rândul curent coboară natural pe rândul de dedesubt. Este esențial pentru grile de etichete (tags), galerii foto și liste responsive de carduri.

Valori uzuale

Valoare	Descriere
nowrap	Implicit: toate elementele rămân pe un singur rând.
wrap	Elementele trec pe un rând nou când lățimea liniei este depășită.
wrap-reverse	Trec pe rânduri noi în sus în loc de în jos.

Exemple

Exemplul 1: Grilă flexibilă de etichete (badge-uri)

Etichetele curg frumos pe mai multe rânduri în funcție de mărimea ecranului.

.lista-etichete {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.eticheta {
  background: #e2e8f0;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 0.875rem;
}

Efect vizual în browser

Etichetele stau pe un rând atâta timp cât încap; cele care depășesc marginea trec curat pe rândul doi.

Greșeli frecvente

• Omiterea lui flex-wrap: wrap pe o listă de produse sau taguri; pe mobil, elementele se vor strivi unele în altele până devin ilizibile.

Comenzi înrudite

• display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
• gap (row-gap, column-gap): Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.
• flex (grow, shrink, basis): Scurtătură aplicată pe un element copil flex pentru a controla creșterea (grow), micșorarea (shrink) și mărimea de bază (basis).