Στοίχιση flex στοιχείων σε γονέα με περιθώρια

Η τιμή space-around στην ιδιότητα justify-content ορίζει περιθώρια από την άκρη του γονέα για το πρώτο και το τελευταίο flex στοιχείο.

Με την πρώτη ματιά μπορεί να φαίνεται ότι η απόσταση μεταξύ των στοιχείων και μεταξύ των ακραίων στοιχείων και του γονέα θα είναι ίσες, ωστόσο, δεν είναι έτσι - η απόσταση μεταξύ των στοιχείων θα είναι 2 φορές μεγαλύτερη από ότι μεταξύ του γονέα και του ακραίου στοιχείου.

Ας δούμε ένα παράδειγμα:

css.parent {
  display: flex;
  justify-content: space-around;
}

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