Wyrównywanie elementów flex wzdłuż rodzica z odstępami

Wartość space-around we właściwości justify-content ustawia pierwszemu i ostatniemu elementowi flex odstęp od krawędzi rodzica.

Na pierwszy rzut oka może się wydawać, że odległość między elementami oraz między skrajnymi elementami a rodzicem będą równe, jednak tak nie jest - odległość między elementami będzie 2 razy większa niż między rodzicem a skrajnym elementem.

Spójrzmy na przykład:

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

Wynik wykonania kodu: