Kurs HTML

Ustalanie kierunku osi głównej

Właściwość flex-direction jest stosowana do **kontenera flex** i definiuje kierunek **osi głównej (main axis)**. To właśnie wzdłuż tej osi będą domyślnie układane elementy flex.

Zmiana flex-direction wpływa nie tylko na kierunek układania elementów, ale również na orientację osi poprzecznej (cross axis), która zawsze jest prostopadła do osi głównej.

Możliwe wartości flex-direction

Właściwość flex-direction może przyjmować cztery główne wartości:

1. row (wartość domyślna):

   • Oś główna jest **pozioma**.
   • Elementy układane są w wierszu, od lewej do prawej (w językach LTR - Left-to-Right).
   • Oś poprzeczna jest pionowa.

   .container {
     display: flex;
     flex-direction: row; /* Domyślne, można pominąć */
   }
   

   <!-- Elementy ułożą się: [1] [2] [3] -->

2. row-reverse:

   • Oś główna jest **pozioma**.
   • Elementy układane są w wierszu, ale w **odwrotnej kolejności**, od prawej do lewej (w językach LTR).
   • Oś poprzeczna jest pionowa.

   .container {
     display: flex;
     flex-direction: row-reverse;
   }
   

   <!-- Elementy ułożą się: [3] [2] [1] -->

3. column:

   • Oś główna jest **pionowa**.
   • Elementy układane są w kolumnie, od góry do dołu.
   • Oś poprzeczna jest pozioma.

   .container {
     display: flex;
     flex-direction: column;
   }
   

   <!-- Elementy ułożą się: -->
   <!-- [1] -->
   <!-- [2] -->
   <!-- [3] -->

4. column-reverse:

   • Oś główna jest **pionowa**.
   • Elementy układane są w kolumnie, ale w **odwrotnej kolejności**, od dołu do góry.
   • Oś poprzeczna jest pozioma.

   .container {
     display: flex;
     flex-direction: column-reverse;
   }
   

   <!-- Elementy ułożą się: -->
   <!-- [3] -->
   <!-- [2] -->
   <!-- [1] -->

Wizualizacja:

(Powyżej znajduje się prosta wizualizacja działania różnych wartości flex-direction.)

Wpływ na osie i właściwości wyrównania

Zmiana flex-direction ma kluczowy wpływ na działanie właściwości wyrównujących:

• justify-content: Zawsze wyrównuje elementy wzdłuż **osi głównej**.
• align-items: Zawsze wyrównuje elementy wzdłuż **osi poprzecznej** (w ramach pojedynczej linii flex).
• align-content: Zawsze wyrównuje **linie flex** (gdy jest ich więcej niż jedna) wzdłuż **osi poprzecznej**.
• align-self: Zawsze wyrównuje **pojedynczy element flex** wzdłuż **osi poprzecznej**.

Dlatego, jeśli zmienisz flex-direction na column, to justify-content będzie kontrolować wyrównanie pionowe, a align-items wyrównanie poziome.