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