플렉스 레이아웃은 한 줄의 양쪽에 정렬하고 한 줄 미만의 왼쪽 정렬을 달성합니다.

코드는 다음과 같습니다.

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container:after {
  content: "";
  flex: auto;
}

위의 코드에서 .container플렉스 항목을 포함하는 컨테이너 요소입니다. justify-content속성을 로 설정 하면 space-between항목이 한 줄에 정렬됩니다. flex-wrap속성을 로 설정하여 wrap항목을 래핑할 수 있습니다 .

그런 다음 :after의사 요소를 사용하여 컨테이너 끝에 플렉스 항목을 만들고 flex: auto. 이런 식으로 항목이 한 줄 미만이면 플렉스 항목이 나머지 공간을 차지하여 항목을 왼쪽에 정렬합니다.