Własność CSS flex-wrap określa, czy treść kontenera flex ma być układana w całości w jednym rzędzie, czy w razie potrzeby może być podzielona na kilka rzędów, oraz ewentualnie kierunek układania tych rzędów.
Wartości i składnia
Własność flex-wrap
jako wartość przyjmuje jedno z następujących słów kluczowych:
nowrap
- Zawartość kontenera flex jest układana w jednym rzędzie. Jeśli się w nim nie zmieści, to wyjdzie poza jego granice.
wrap
- Zwartość kontenera flex jest układana w wielu rzędach, co pozwala zapobiec ewentualnemu wyjściu treści poza jego granice.
wrap-reverse
- To samo, co wrap, tylko w odwrotnej kolejności.
Przykłady
Spójrz na poniższy prosty fragment dokumentu HTML.
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>>
Poniższe reguły CSS zamieniają nadrzędny kontener div
w kontener flex oraz ustawiają jego zawartość w pionowych rzędach w odwrotnej kolejności.
body > div {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
width: 500px;
height: 200px;
padding: 15px;
border: 1px dashed black;
}
div > div {
padding: 20px 40px;
margin: 5px;
border: 1px solid black;
font-size: 30px;
}
Efekt:

Podsumowanie
Zastosowanie | Kontenery flex |
---|---|
Obsługiwane wartości | Słowa kluczowe nowrap , wrap i wrap-reverse |
Wartość początkowa | nowrap |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Flexible Box Layout Module Level 1, flex-wrap |