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 |
