'justify-content: space-between'을 사용하여 Flexbox 그리드의 마지막 행을 균등하게 정렬하려면 어떻게 해야 합니까?

Flex-Box: 마지막 행을 그리드에 정렬

Flex-box 레이아웃에서는 마지막 행의 항목을 다른 항목과 정렬하는 것이 어려울 수 있습니다. justify-content: space-between;을 사용하면 그리드 크기를 조정하면 정렬이 깨질 수 있습니다.

이 문제를 해결하기 위해 간단하고 우아한 솔루션이 나타났습니다.

:after

남은 부분을 자동으로 채우는 ::after 의사 요소를 추가하세요. space:

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

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

작동 방식:

:after 의사 요소는 그리드의 빈 공간을 채우는 가상 요소를 생성합니다. flex:auto;를 지정하면 자동으로 맞게 조정됩니다. 따라서 마지막 행 항목은 그리드 크기에 관계없이 HTML 구조를 수정하지 않고 원활하게 정렬됩니다.

실시간 데모를 보려면 여기에서 제공된 CodePen 예제를 참조하세요: http://codepen.io/DanAndreasson/pen /ZQXLXj

위 내용은 'justify-content: space-between'을 사용하여 Flexbox 그리드의 마지막 행을 균등하게 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!