Στοίχιση Flex μπλοκ κατά τον εγκάρσιο άξονα στο CSS
Ας στοιχίσουμε τώρα τα μπλοκ και
κατά τον εγκάρσιο άξονα. Η στοίχιση κατά αυτόν τον άξονα
ορίζεται από την ιδιότητα align-items. Η τιμή
flex-start πιέζει τα στοιχεία στην αρχή
του άξονα, ενώ η τιμή flex-end - στο τέλος.
Ας δοκιμάσουμε με παραδείγματα.
Παράδειγμα
Ας κατευθύνουμε τον κύριο άξονα από αριστερά προς τα δεξιά. Σε αυτήν την περίπτωση ο εγκάρσιος άξονας θα κατευθύνεται από πάνω προς τα κάτω. Ας ρυθμίσουμε τη διάταξη των μπλοκ μας τόσο κατά τον κύριο άξονα, όσο και κατά τον εγκάρσιο άξονα.
Κατά τον κύριο άξονα θα πιέσουμε τα μπλοκ στην αρχή του,
δηλαδή στην αριστερή άκρη. Για αυτό, η ιδιότητα justify-content
θα οριστεί στην τιμή flex-start. Κατά τον
εγκάρσιο άξονα επίσης θα πιέσουμε τα μπλοκ στην αρχή του,
δηλαδή στην πάνω άκρη. Για αυτό, η ιδιότητα align-items
θα οριστεί επίσης στην τιμή flex-start.
Ας δούμε τι παίρνουμε:
.parent {
display: flex;
flex-direction: row; /* κύριος άξονας προς τα δεξιά, εγκάρσιος προς τα κάτω */
justify-content: flex-start; /* μπλοκ στην αρχή του κύριου άξονα */
align-items: flex-start; /* μπλοκ στην αρχή του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
Παράδειγμα
Ας πιέσουμε τώρα τα μπλοκ στο τέλος του εγκάρσιου
άξονα, δηλαδή στο κάτω μέρος. Για αυτό, η ιδιότητα align-items
θα οριστεί στην τιμή flex-end:
.parent {
display: flex;
flex-direction: row; /* κύριος άξονας προς τα δεξιά, εγκάρσιος προς τα κάτω */
justify-content: flex-start; /* μπλοκ στην αρχή του κύριου άξονα */
align-items: flex-end; /* μπλοκ στο τέλος του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
Παράδειγμα
Ας κατευθύνουμε τώρα τον κύριο άξονα από πάνω προς τα κάτω. Εφόσον ο κύριος άξονας είναι κάθετος, ο εγκάρσιος θα κατευθύνεται από δεξιά προς τα αριστερά. Ας πιέσουμε τα μπλοκ και στους δύο άξονες στην αρχή τους:
.parent {
display: flex;
flex-direction: column; /* κύριος άξονας προς τα κάτω, εγκάρσιος προς τα δεξιά */
justify-content: flex-start; /* μπλοκ στην αρχή του κύριου άξονα */
align-items: flex-start; /* μπλοκ στην αρχή του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
Παράδειγμα
Και τώρα κατά τον εγκάρσιο άξονα θα πιέσουμε τα μπλοκ στο τέλος του:
.parent {
display: flex;
flex-direction: column; /* κύριος άξονας προς τα κάτω, εγκάρσιος προς τα δεξιά */
justify-content: flex-start; /* μπλοκ στην αρχή του κύριου άξονα */
align-items: flex-end; /* μπλοκ στο τέλος του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
Παράδειγμα
Ας πιέσουμε τα μπλοκ στο τέλος και των δύο αξόνων:
.parent {
display: flex;
flex-direction: column; /* κύριος άξονας προς τα κάτω, εγκάρσιος προς τα δεξιά */
justify-content: flex-end; /* μπλοκ στο τέλος του κύριου άξονα */
align-items: flex-end; /* μπλοκ στο τέλος του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
Παράδειγμα
Ας αλλάξουμε την κατεύθυνση του κύριου άξονα - ας τον κατευθύνουμε από κάτω προς τα πάνω. Σε αυτήν την περίπτωση ο εγκάρσιος άξονας δεν θα αλλάξει την κατεύθυνσή του, αφού ο κύριος άξονας παραμένει κάθετος.
Ας πιέσουμε τα μπλοκ στην αρχή και των δύο αξόνων:
.parent {
display: flex;
flex-direction: column-reverse; /* κύριος άξονας προς τα πάνω, εγκάρσιος προς τα δεξιά */
justify-content: flex-start; /* μπλοκ στην αρχή του κύριου άξονα */
align-items: flex-start; /* μπλοκ στην αρχή του εγκάρσιου άξονα */
}
Αποτέλεσμα εκτέλεσης του κώδικα:
