#31. Wybieramy kierunek wyświetlania

Właściwość flex-direction

Idąc dalej z modelem flexbox, poznajmy właściwość flex-direction. Odpowiada on za ustawienie kolejności wyświetlania wszystkich elementów w kontenerze. Niezależnie od tego w jaki sposób są one ułożone w kodzie HTML, zawsze możemy zmienić kierunek wyświetlania.

Poznajmy wartości które przyjmuje właściwość flex-direction:

• row (wartość domyslna) – elementy wyświetlają się horyzontalnie w wierszu – od lewej do prawej,
• row-reverse – elementy wyświetlają się horyzontalnie w wierszu – od prawej do lewej,
• column – elementy wyświetlają się w pionie, w kolumnie – jeden pod drugim,
• column-reverse – elementy wyświetlają się w pionie, w kolumnie – w odwróconej kolejności.

Powyższe wartości dla właściwości flex-direction znajdują między innymi zastosowanie w zarządzaniu kolejnością zdjęć w galerii.

Spójrz na poniższy przykład. Zobrazuję Ci różnice między wartościami: