flex-flow
Skrót łączący flex-direction i flex-wrap w jednej deklaracji.
- Wartość domyślna
row nowrap- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery flex
- JavaScript
element.style.flexFlow = "row wrap"
Przykład
#.gallery {
display: flex;
flex-flow: row wrap;
gap: 8px;
}<div class="gallery stage">
<div class="box" style="width: 30%">1</div><div class="box" style="width: 30%">2</div>
<div class="box" style="width: 30%">3</div><div class="box" style="width: 30%">4</div>
</div>Definicja i zastosowanie
#Właściwość flex-flow ustawia naraz kierunek osi głównej (flex-direction) i zawijanie (flex-wrap). Wartości możesz podać w dowolnej kolejności, a pominięta dostaje wartość domyślną.
Zapis flex-flow: row wrap to najczęstsze użycie: elementy w wierszu, z przechodzeniem do nowej linii. Jest krótszy, ale mniej czytelny dla początkujących, więc w wielu projektach i tak pisze się obie właściwości osobno.
Jak każdy skrót, flex-flow nadpisuje obie właściwości składowe, także te ustawione wcześniej w innych regułach.
Składnia
#flex-flow: <flex-direction> || <flex-wrap>;Wartości
#- Wartość domyślna: jeden wiersz bez zawijania.
- Wiersz z zawijaniem.
- Sama kolumna, zawijanie zostaje domyślne.
- Odwrócony wiersz z zawijaniem.
Wartości w praktyce
#row nowrap
.demo { flex-flow: row nowrap; }row wrap
.demo { flex-flow: row wrap; }column
.demo { flex-flow: column; }row-reverse wrap
.demo { flex-flow: row-reverse wrap; }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
#- Jeśli zespół nie zna dobrze Flexboxa, pisz
flex-directioniflex-wraposobno. Kod będzie czytelniejszy. - Skrót nadpisuje obie właściwości naraz, więc uważaj na kolejność reguł w arkuszu.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.