Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >flex-flow

flex-flow

flex-flow: <flex-direction> || <flex-wrap>

Skrót, który ustawia naraz flex-direction (kierunek) i flex-wrap (zawijanie). flex-flow: row wrap oznacza elementy obok siebie z zawijaniem.

Wartości

  • Jedna lub dwie wartości w dowolnej kolejności: kierunek (row, row-reverse, column, column-reverse) i zawijanie (nowrap, wrap, wrap-reverse).
  • Pominięta część dostaje wartość początkową: flex-flow: wrap = row wrap.

Wartość początkowa: row nowrap. Dziedziczona: nie. Dotyczy: kontenerów flex.

Przykłady

Kolumna, która przechodzi do następnej kolumny, gdy brakuje wysokości:

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

.flex {
  display: flex;
  padding: 6px;
  border: 2px dashed #999;
}
.flex > div {
  padding: 6px 10px;
  background: #eaf7ff;
  border: 1px solid #38b8f9;
}
.flex {
  flex-flow: column wrap;
  height: 110px;
  gap: 6px;
}
Wynik
1
2
3
4
5

Na co uważać

  • Jak każdy skrót nadpisuje obie właściwości: flex-flow: wrap przywraca wcześniej ustawione flex-direction: column do row.
  • Zawijane kolumny (column wrap) potrzebują stałej lub maksymalnej wysokości kontenera, inaczej nie ma powodu do zawijania i wszystko zostaje w jednej kolumnie.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od września 2015, za szeroko dostępne uznawane od marca 2018. Od wersji: Chrome 29, Firefox 28, Safari 9. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
flex-direction
flex-wrap
align-content