Alineación de elementos flex con márgenes en el contenedor

El valor space-around en la propiedad justify-content establece un margen desde el borde del contenedor para el primer y último elemento flex.

A primera vista puede parecer que la distancia entre los elementos y entre los elementos extremos y el contenedor serán iguales, sin embargo, no es así - la distancia entre los elementos será 2 veces mayor que entre el contenedor y el elemento extremo.

Veamos un ejemplo:

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

Resultado de ejecutar el código: