Κύρια και εγκάρσια άξονας σε flex containers στο CSS

Για τα flexbox μπορούμε να μιλήσουμε με δύο όρους: ο πρώτος είναι - σειρά ή στήλη, ο δεύτερος - με όρους αξόνων. Με τις σειρές και τις στήλες έχουμε ήδη ασχοληθεί, ας ασχοληθούμε τώρα με τους άξονες. Η κατανόηση των αξόνων είναι απαραίτητη για να ευθυγραμμίζουμε τα στοιχεία οριζόντια ή κάθετα.

Όταν εργαζόμαστε με flex στοιχεία, πάντα υπάρχει μια κύρια άξονας και μια εγκάρσια. Μπορούμε να ευθυγραμμίσουμε τα στοιχεία κατά τη διεύθυνση της κύριας άξονα και κατά πλάτος της κύριας άξονα. Η κύρια άξονας μπορεί να έχει 4 κατευθύνσεις: από αριστερά προς τα δεξιά, από δεξιά προς τα αριστερά, από πάνω προς τα κάτω και από κάτω προς τα πάνω.

Η διεύθυνση της εγκάρσιας άξονα εξαρτάται από τη διεύθυνση της κύριας: εάν η κύρια άξονας είναι οριζόντια, τότε η εγκάρσια είναι κατευθυνόμενη από πάνω προς τα κάτω, εάν η κύρια άξονας είναι κάθετη, τότε η εγκάρσια είναι κατευθυνόμενη από αριστερά προς τα δεξιά. Άλλες κατευθύνσεις η εγκάρσια άξονας δεν μπορεί να έχει.

Η διεύθυνση της κύριας άξονα ρυθμίζεται από την ιδιότητα flex-direction. Εάν αυτή η ιδιότητα έχει τιμή row - η κύρια άξονας είναι κατευθυνόμενη από αριστερά προς τα δεξιά, εάν η τιμή είναι row-reverse, τότε από δεξιά προς τα αριστερά. Η τιμή column κατευθύνει την άξονα από πάνω προς τα κάτω, και η τιμή column-reverse - από κάτω προς τα πάνω.

Ας υποθέσουμε ότι η κύρια άξονας είναι οριζόντια. Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;

Ας υποθέσουμε ότι η κύρια άξονας είναι κάθετη. Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;

Ας υποθέσουμε ότι η εγκάρσια άξονας είναι κατευθυνόμενη προς τα δεξιά. Πού μπορεί σε αυτή την περίπτωση να είναι κατευθυνόμενη η κύρια άξονας;

Ας υποθέσουμε ότι η εγκάρσια άξονας είναι κατευθυνόμενη προς τα κάτω. Πού μπορεί σε αυτή την περίπτωση να είναι κατευθυνόμενη η κύρια άξονας;

Μπορεί η εγκάρσια άξονας να είναι κατευθυνόμενη από δεξιά προς τα αριστερά;

Μπορεί η εγκάρσια άξονας να είναι κατευθυνόμενη από κάτω προς τα πάνω;

Ας υποθέσουμε ότι η ιδιότητα flex-direction έχει τιμή row. Πού θα είναι κατευθυνόμενη η κύρια άξονας; Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;

Ας υποθέσουμε ότι η ιδιότητα flex-direction έχει τιμή column. Πού θα είναι κατευθυνόμενη η κύρια άξονας; Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;

Ας υποθέσουμε ότι η ιδιότητα flex-direction έχει τιμή row-reverse. Πού θα είναι κατευθυνόμενη η κύρια άξονας; Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;

Ας υποθέσουμε ότι η ιδιότητα flex-direction έχει τιμή column-reverse. Πού θα είναι κατευθυνόμενη η κύρια άξονας; Πού θα είναι κατευθυνόμενη η εγκάρσια άξονας;