Własność CSS flex-direction określa orientację i kierunek rozmieszczenia jednostek flex w kontenerze flex poprzez zdefiniowanie orientacji i kierunku osi głównej tego kontenera.
Wartości i składnia
Własność flex-direction
jest logiczną własnością CSS, a więc nie obsługuje tradycyjnych fizycznych kierunków (lewa, prawa), tylko ich logiczne odpowiedniki, które są zależne od ustawień kierunku i orientacji tekstu.
W przypadku dokumentów HTML w języku polskim, w których tekst jest zapisywany od lewej i od góry, można w uproszczeniu przyjąć, że własność flex-direction
pozwala rozmieścić zawartość kontenera flex w poziomie (row
) lub pionie (column
).
Poniżej znajduje się dokładniejszy opis wszystkich wartości przyjmowanych przez własność flex-direction
.
- row — oś główna kontenera flex ma orientację zgodną z osią śródliniową tekstu w danym kontenerze flex. Uproszczając pod kątem języka polskiego, elementy zostają rozmieszczone poziomo od lewej.
row-reverse
— robi to samo, corow
, tylko odwraca kierunek, a więc ustawia elementy „poziomo od prawej”.column
— oś główna kontenera flex ma orientację zgodną z osią blokową tekstu w danym kontenerze flex. Uproszczając pod kątem języka polskiego, elementy zostają rozmieszczone pionowo od góry.column-reverse
— robi to samo, cocolumn
, tylko odwraca kierunek, a więc ustawia elementy „pionowo od dołu”.
Przykłady
Spójrz na poniższy fragment dokumentu HTML.
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
Poniższe reguły CSS ustawiają elementy kontenera flex w orientacji poziomej od prawej strony.
body > div {
display: flex;
flex-direction: row-reverse;
width: 600px;
height: 100px;
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 row , row-reverse , column , column-reverse |
Wartość początkowa | row |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Flexible Box Layout Module Level 1, flex-direction |