CSS에서 부모 요소를 기준으로 플렉스 요소 정렬하기

justify-content 속성에 지정된 값 space-between는 요소들을 부모 요소를 따라 균등하게 배분합니다. 이때 요소들 사이의 거리는 자동으로 계산됩니다. 첫 번째 요소는 왼쪽 가장자리에 붙고, 마지막 요소는 오른쪽 가장자리에 붙습니다.

예제를 살펴보겠습니다:

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

코드 실행 결과: