Flexbox 그리드의 마지막 행을 `justify-content: space-between`으로 정렬하는 방법은 무엇입니까?

Flex-box: 마지막 행을 그리드에 정렬하는 방법

다음과 같은 컨테이너가 있는 flex-box 레이아웃에서:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

마지막 줄의 항목을 다른 항목과 동일하게 정렬하는 것이 목표입니다. justify-content 사용: 공백 사이; 조정 가능한 그리드 너비와 높이로 인해 여전히 중요합니다.

현재 다음을 사용합니다.

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

오른쪽 하단의 항목이 정렬되지 않은 것처럼 보입니다.

이 문제를 해결하려면:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

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

공간을 자동으로 채우기 위해 ::after가 추가되어 HTML을 조정할 필요가 없습니다.

위 내용은 Flexbox 그리드의 마지막 행을 `justify-content: space-between`으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!