마진을 가진 부모 요소에 대한 플렉스 요소 정렬

속성 justify-content의 값 space-around는 첫 번째와 마지막 플렉스 요소에 부모 요소의 가장자리로부터의 여백을 설정합니다.

언뜻 보기에는 요소들 사이의 거리와 가장자리 요소와 부모 요소 사이의 거리가 동일할 것 같지만, 그렇지 않습니다. - 요소들 사이의 거리는 부모 요소와 가장자리 요소 사이 거리의 2배가 됩니다.

예제를 살펴보겠습니다:

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

코드 실행 결과: