Στοίχιση Flex Στοιχείων στον Κύριο Άξονα σε CSS

Η ιδιότητα justify-content επιτρέπει τη στοίχιση των στοιχείων κατά μήκος του κύριου άξονα. Προηγουμένως έχετε ήδη συναντήσει τις τιμές center, space-between, space-around, space-evenly. Ας μελετήσουμε τώρα μερικές ακόμη τιμές.

Η τιμή flex-start πιέζει τα στοιχεία προς την αρχή του κύριου άξονα, ενώ η τιμή flex-end - προς το τέλος. Ας δούμε παραδείγματα.

Παράδειγμα

Ας κατευθύνουμε τον κύριο άξονα από αριστερά προς τα δεξιά, ορίζοντας στην ιδιότητα flex-direction την τιμή row. Ας πιέσουμε τα μπλοκ προς την αρχή του άξονα. Για αυτό, η justify-content θα οριστεί στην τιμή flex-start:

css.parent {
  display: flex;
  flex-direction: row; /* κύριος άξονας από αριστερά προς τα δεξιά */
  justify-content: flex-start; /* μπλοκ προς την αρχή του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας πιέσουμε τώρα τα μπλοκ προς το τέλος του άξονα. Για αυτό, η justify-content θα οριστεί στην τιμή flex-end:

css.parent {
  display: flex;
  flex-direction: row; /* κύριος άξονας από αριστερά προς τα δεξιά */
  justify-content: flex-end; /* μπλοκ προς το τέλος του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας κατευθύνουμε τώρα τον κύριο άξονα από δεξιά προς τα αριστερά, ορίζοντας στην ιδιότητα flex-direction την τιμή row-reverse. Ας πιέσουμε τα μπλοκ προς την αρχή του άξονα, δηλαδή προς τη δεξιά άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-start:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* κύριος άξονας από δεξιά προς τα αριστερά */
  justify-content: flex-start; /* μπλοκ προς την αρχή του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Και τώρα ας πιέσουμε τα μπλοκ προς το τέλος του κύριου άξονα, δηλαδή προς την αριστερή άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-end:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* κύριος άξονας από δεξιά προς τα αριστερά */
  justify-content: flex-end; /* μπλοκ προς το τέλος του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Στα προηγούμενα παραδείγματα ο κύριος άξονας ήταν οριζόντιος. Ας τον αναστρέψουμε τώρα και ας τον κατευθύνουμε κάθετα.

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

Ας πιέσουμε τα μπλοκ προς την αρχή του κύριου άξονα, δηλαδή προς την πάνω άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-start:

css.parent {
  display: flex;
  flex-direction: column; /* κύριος άξονας από πάνω προς τα κάτω */
  justify-content: flex-start; /* μπλοκ προς την αρχή του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας πιέσουμε τώρα τα μπλοκ προς το τέλος του κύριου άξονα, δηλαδή προς την κάτω άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-end:

css.parent {
  display: flex;
  flex-direction: column; /* κύριος άξονας από πάνω προς τα κάτω */
  justify-content: flex-end; /* μπλοκ προς το τέλος του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας αναστρέψουμε τον κύριο άξονα, κατευθύνοντάς τον από κάτω προς τα πάνω. Για αυτό, στην ιδιότητα flex-direction θα ορίσουμε την τιμή column-reverse. Σε αυτή την περίπτωση τα μπλοκ θα αλλάξουν τη σειρά τους - στην αρχή του άξονα θα βρίσκεται το τελευταίο στοιχείο του HTML κώδικα.

Ας πιέσουμε τα μπλοκ προς την αρχή του κύριου άξονα, δηλαδή προς την κάτω άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-start:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* κύριος άξονας από κάτω προς τα πάνω */
  justify-content: flex-start; /* μπλοκ προς την αρχή του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Παράδειγμα

Ας πιέσουμε τα μπλοκ προς το τέλος του κύριου άξονα, δηλαδή προς την πάνω άκρη. Για αυτό, η justify-content θα οριστεί στην τιμή flex-end:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* κύριος άξονας από κάτω προς τα πάνω */
  justify-content: flex-end; /* μπλοκ προς το τέλος του κύριου άξονα */
}

Αποτέλεσμα εκτέλεσης του κώδικα:

Πρακτικές Ασκήσεις