Allineamento degli elementi flex nel genitore con margini

Il valore space-around nella proprietà justify-content imposta un margine dal bordo del genitore per il primo e l'ultimo elemento flex.

A prima vista potrebbe sembrare che la distanza tra gli elementi e tra gli elementi estremi e il genitore siano uguali, tuttavia, non è così - la distanza tra gli elementi sarà 2 volte maggiore di quella tra il genitore e l'elemento estremo.

Diamo un'occhiata all'esempio:

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

Risultato dell'esecuzione del codice: