Alinhamento de elementos flex em relação ao pai com margens

O valor space-around na propriedade justify-content define uma margem da borda do elemento pai para o primeiro e para o último elemento flex.

À primeira vista, pode parecer que a distância entre os elementos e entre os elementos das extremidades e o pai serão iguais, no entanto, não é o caso - a distância entre os elementos será 2 vezes maior do que entre o pai e o elemento da extremidade.

Vamos ver um exemplo:

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

Resultado da execução do código: