Flexbox 그리드 레이아웃에서 마지막 행의 요소를 어떻게 정렬할 수 있나요?

Flex-box: 그리드 레이아웃의 마지막 행 요소 정렬

행으로 배열되고 래핑된 컨테이너로 Flexbox 레이아웃을 디자인할 때 마지막 행의 요소를 이전 행에 있는 항목은 문제가 될 수 있습니다. 수직 정렬을 보장하면서 요소 사이에 원하는 간격을 유지하려면 다음 솔루션을 사용할 수 있습니다.

컨테이너 내에서 ::after 의사 요소를 정의하는 새 CSS 규칙을 만듭니다.

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

이 의사 요소는 자리 표시자 역할을 하며 컨테이너 내에 남아 있는 공간을 모두 차지합니다. flex 속성을 auto로 설정하면 사용 가능한 수평 공간이 자동으로 채워져 마지막 행의 요소가 다른 행의 요소와 효과적으로 정렬됩니다.

컨테이너 요소에 대한 CSS 정의 내에 이 새로운 규칙을 포함해야 한다는 점을 기억하세요. 원하는 레이아웃에 적용되었는지 확인하세요.

위 내용은 Flexbox 그리드 레이아웃에서 마지막 행의 요소를 어떻게 정렬할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!