justify-content: space-between Explained (CSS)
Δημιουργήστε μια διάταξη flexbox CSS οπτικά: flex-direction, justify-content, align-items, flex-wrap and gap στο κοντέινερ, καθώς και ανά παιδί flex-grow, flex-shrink και flex-base, όλα με ζωντανή προεπισκόπηση και CSS με δυνατότητα αντιγραφής.
Αποτέλεσμα
Αυτή η σελίδα ανοίγει τη γεννήτρια με το justify-content που έχει οριστεί στο διάστημα μεταξύ: το πρώτο κουτί τοποθετείται στο ίδιο επίπεδο με την αρχική άκρη του δοχείου, το τελευταίο κουτί βρίσκεται στο ίδιο επίπεδο με την ακραία άκρη του και ο χώρος που απομένει χωρίζεται σε ίσα κενά μεταξύ των πλαισίων στη μέση — ποτέ πριν από το πρώτο ή μετά το τελευταίο.
Αυτή είναι η λεπτομέρεια που μπερδεύει ο κόσμος. Το space-around δίνει σε κάθε κουτί ίσο περιθώριο και στις δύο πλευρές του, έτσι τα κενά μεταξύ των κουτιών καταλήγουν διπλάσια από τα κενά στα δύο εξωτερικά άκρα (κάθε άκρη παίρνει μόνο ένα περιθώριο κουτιού, όχι δύο). Ο χώρος προχωρά ομοιόμορφα και κάνει κάθε κενό το ίδιο μέγεθος, συμπεριλαμβανομένων των δύο εξωτερικών άκρων — το μόνο από τα τρία όπου η απόσταση φαίνεται τέλεια ομοιόμορφη σε όλη τη διαδρομή.
Εναλλάξτε το αναπτυσσόμενο μενού justify-content μεταξύ των τριών παρακάτω τιμών και παρακολουθήστε τα ίδια τρία πλαίσια να αναδιατάσσονται — είναι ο πιο γρήγορος τρόπος για να δείτε τη διαφορά αντί να την απομνημονεύσετε. Αντιγράψτε το CSS για όποιο ταιριάζει με το διάστημα που πραγματικά θέλετε.