Axa principală și axa transversală în blocurile flex în CSS

Despre flexbox-uri se poate vorbi în doi termeni: primul este - rând sau coloană, al doilea - în termeni de axe. Cu rândurile și coloanele ne-am lămurit deja, haideți acum să înțelegem axele. Înțelegerea axelor este necesară pentru a alinia elementele pe orizontală sau pe verticală.

Când lucrăm cu elementele flex, există întotdeauna o axă principală și una transversală. Putem alinia elementele de-a lungul axei principale și perpendicular pe axa principală. Axa principală poate avea 4 direcții: de la stânga la dreapta, de la dreapta la stânga, de sus în jos și de jos în sus.

Direcția axei transversale depinde de direcția axei principale: dacă axa principală este orizontală, atunci axa transversală este îndreptată de sus în jos, dacă axa principală este verticală, atunci axa transversală este îndreptată de la stânga la dreapta. Alte direcții axa transversală nu poate avea.

Direcția axei principale este reglată de proprietatea flex-direction. Dacă această proprietate are valoarea row - axa principală este îndreptată de la stânga la dreapta, dacă valoarea este row-reverse, atunci de la dreapta la stânga. Valoarea column îndreaptă axa de sus în jos, iar valoarea column-reverse - de jos în sus.

Să presupunem că axa principală este orizontală. În ce direcție va fi îndreptată axa transversală?

Să presupunem că axa principală este verticală. În ce direcție va fi îndreptată axa transversală?

Să presupunem că axa transversală este îndreptată spre dreapta. În ce direcție poate fi îndreptată, în acest caz, axa principală?

Să presupunem că axa transversală este îndreptată în jos. În ce direcție poate fi îndreptată, în acest caz, axa principală?

Poate fi axa transversală îndreptată de la dreapta la stânga?

Poate fi axa transversală îndreptată de jos în sus?

Să presupunem că proprietatea flex-direction are valoarea row. În ce direcție va fi îndreptată axa principală? În ce direcție va fi îndreptată axa transversală?

Să presupunem că proprietatea flex-direction are valoarea column. În ce direcție va fi îndreptată axa principală? În ce direcție va fi îndreptată axa transversală?

Să presupunem că proprietatea flex-direction are valoarea row-reverse. În ce direcție va fi îndreptată axa principală? În ce direcție va fi îndreptată axa transversală?

Să presupunem că proprietatea flex-direction are valoarea column-reverse. În ce direcție va fi îndreptată axa principală? În ce direcție va fi îndreptată axa transversală?