Στοίχιση flex στοιχείων σε γονέα με περιθώρια
Η τιμή space-around στην ιδιότητα justify-content ορίζει
περιθώρια από την άκρη του γονέα για το πρώτο και το τελευταίο flex στοιχείο.
Με την πρώτη ματιά μπορεί να φαίνεται ότι η απόσταση
μεταξύ των στοιχείων και μεταξύ των ακραίων στοιχείων
και του γονέα θα είναι ίσες, ωστόσο, δεν είναι έτσι
- η απόσταση μεταξύ των στοιχείων θα είναι 2
φορές μεγαλύτερη από ότι μεταξύ του γονέα και του ακραίου
στοιχείου.
Ας δούμε ένα παράδειγμα:
.parent {
display: flex;
justify-content: space-around;
}
Αποτέλεσμα εκτέλεσης κώδικα: