Własność CSS flex-direction

> Dodaj do ulubionych

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, co row, tylko odwraca kierunek, a więc ustawia elementy „poziomo od prawej”.
  • columnoś 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, co column, 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:

Efekt zastosowania własności flex-direction: row-reverse

Podsumowanie

ZastosowanieKontenery flex
Obsługiwane wartościSłowa kluczowe row, row-reverse, column, column-reverse
Wartość początkowarow
DziedziczenieNie
Specyfikacja CSSCSS Flexible Box Layout Module Level 1, flex-direction
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.