CSS Flexbox. Proprietatea flex-wrap. Valoarea wrap. Valoarea nowrap. Valoarea wrap-reverse.

Proprietatea flex-wrap

Proprietatea flex-wrap specifică dacă elementele flex trebuie să fie wrap sau nu.

Exemplele de mai jos au 12 itemi flex, pentru a demonstra mai bine proprietatea flex-wrap-ului.



Exemplu:

Valoarea wrap specifică faptul că elementele flex se vor wrap dacă este necesar:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Exemplu:

Valoarea nowrap specifică faptul că elementele flex nu se vor wrap (aceasta este implicită):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

Exemplu:

Valoarea wrap-reverse specifică faptul că elementele flexibile se vor wrap dacă este necesar, în ordine inversă:

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}