Подравняне на флекс елементи спрямо родителя с отстъпи

Стойността space-around в свойството justify-content задава отстъп от края на родителя за първия и последния флекс елемент.

На пръв поглед може да изглежда, че разстоянието между елементите и между крайните елементи и родителя ще бъдат равни, но това не е така - разстоянието между елементите ще бъде 2 пъти по-голямо, отколкото между родителя и крайния елемент.

Нека разгледаме пример:

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

Резултат от изпълнението на кода: