flex-direction
Ustala kierunek osi głównej: elementy flex układają się w wierszu albo w kolumnie.
- Wartość domyślna
row- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery flex
- JavaScript
element.style.flexDirection = "column"
Przykład
#.cards {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 600px) {
.cards { flex-direction: row; }
}<div class="cards stage">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
</div>Definicja i zastosowanie
#Właściwość flex-direction wybiera oś główną kontenera flex. Przy row elementy stoją obok siebie w poziomie, przy column jeden pod drugim. Warianty z -reverse odwracają kolejność wyświetlania.
Od kierunku zależy działanie innych właściwości. justify-content zawsze rozmieszcza elementy wzdłuż osi głównej, a align-items wzdłuż poprzecznej. Po zmianie na column justify działa więc w pionie, a align w poziomie.
Odwrócenie kolejności zmienia tylko wygląd. Czytniki ekranu i nawigacja klawiszem Tab nadal idą w kolejności z kodu, dlatego nie używaj -reverse do porządkowania ważnej treści.
Składnia
#flex-direction: row | row-reverse | column | column-reverse;Wartości
#- Elementy w wierszu, w kierunku pisania tekstu.
- Wiersz w odwrotnej kolejności, od prawej krawędzi.
- Elementy w kolumnie, od góry do dołu.
- Kolumna w odwrotnej kolejności, od dołu.
Wartości w praktyce
#row
.demo { flex-direction: row; }row-reverse
.demo { flex-direction: row-reverse; }column
.demo { flex-direction: column; }column-reverse
.demo { flex-direction: column-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
#- Na telefonach często zaczyna się od
column, a na szerszych ekranach przełącza naroww zapytaniu@media. - Zmiana kierunku zamienia rolami
justify-contentialign-items. To najczęstsze źródło zdziwienia przy Flexboxie.
Powiązane hasła
#- flex-wrapPozwala elementom flex zawijać się do kolejnych linii, gdy brakuje miejsca.
- flex-flowSkrót łączący flex-direction i flex-wrap w jednej deklaracji.
- justify-contentRozmieszcza elementy wzdłuż osi głównej kontenera flex lub grid.
- align-itemsWyrównuje elementy na osi poprzecznej kontenera flex lub grid.
- orderZmienia kolejność wyświetlania elementu w kontenerze flex lub grid.
Widzisz błąd albo brakuje przykładu? Napisz do nas.