Oś główna i oś poprzeczna w blokach flex w CSS

O flexboxach można mówić w dwóch terminach: pierwsze to - wiersz lub kolumna, drugie - w terminach osi. Z wierszami i kolumnami już się zajęliśmy, zajmijmy się teraz osiami. Zrozumienie osi jest potrzebne, aby wyrównywać elementy w poziomie lub w pionie.

Podczas pracy z elementami flex zawsze istnieje oś główna i poprzeczna. Możemy elementy wyrównywać wzdłuż osi głównej i w poprzek osi głównej. Oś główna może mieć 4 kierunki: od lewej do prawej, od prawej do lewej, z góry na dół i od dołu do góry.

Kierunek osi poprzecznej zależy od kierunku osi głównej: jeśli oś główna jest pozioma, to oś poprzeczna jest skierowana z góry na dół, jeśli oś główna jest pionowa, to oś poprzeczna jest skierowana od lewej do prawej. Innych kierunków oś poprzeczna mieć nie może.

Kierunek osi głównej jest regulowany przez właściwość flex-direction. Jeśli ta właściwość ma wartość row - oś główna jest skierowana od lewej do prawej, jeśli wartość row-reverse, to od prawej do lewej. Wartość column kieruje oś z góry na dół, a wartość column-reverse - od dołu do góry.