Właściwość CSSFlexbox
flex-wrap
Pozwala elementom flex zawijać się do kolejnych linii, gdy brakuje miejsca.
- Wartość domyślna
nowrap- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery flex
- JavaScript
element.style.flexWrap = "wrap"
Przykład
#CSS
.tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}HTML przykładu
<div class="tags stage">
<span class="box">HTML</span><span class="box">CSS</span><span class="box">JavaScript</span>
<span class="box">TypeScript</span><span class="box">React</span><span class="box">Python</span>
</div>Podgląd
Definicja i zastosowanie
#Domyślnie kontener flex ściska wszystkie elementy w jednej linii, nawet jeśli robią się przez to bardzo wąskie. Właściwość flex-wrap z wartością wrap pozwala im przejść do następnej linii.
Zawijanie to podstawa responsywnych list kart, tagów i przycisków: na szerokim ekranie mieszczą się w jednym rzędzie, na wąskim układają się w kilku.
Dopiero przy wielu liniach zaczyna działać align-content, które rozmieszcza całe linie względem siebie.
Składnia
#Składnia
flex-wrap: nowrap | wrap | wrap-reverse;Wartości
#- Wszystkie elementy w jednej linii. Kurczą się albo wystają poza kontener.
- Elementy, które się nie mieszczą, przechodzą do kolejnej linii.
- Zawijanie w górę: nowe linie pojawiają się nad poprzednimi.
Wartości w praktyce
#nowrap
Wszystkie elementy w jednej linii. Kurczą się albo wystają poza kontener.
.demo { flex-wrap: nowrap; }wrap
Elementy, które się nie mieszczą, przechodzą do kolejnej linii.
.demo { flex-wrap: wrap; }wrap-reverse
Zawijanie w górę: nowe linie pojawiają się nad poprzednimi.
.demo { flex-wrap: wrap-reverse; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przy zawijanych listach ustaw
gap, a nie marginesy. Odstępy będą równe także między liniami. - Jeśli chcesz równych kolumn niezależnie od liczby elementów, Grid z
repeat(auto-fill, minmax(…))zrobi to lepiej.
Powiązane hasła
#- flex-directionUstala kierunek osi głównej: elementy flex układają się w wierszu albo w kolumnie.
- flex-flowSkrót łączący flex-direction i flex-wrap w jednej deklaracji.
- align-contentRozmieszcza całe linie elementów na osi poprzecznej kontenera.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
Widzisz błąd albo brakuje przykładu? Napisz do nas.