마지막 기준선 정렬

이제 모든 주요 브라우저 엔진이 CSS 그리드 및 Flexbox에서 마지막 기준 정렬을 지원합니다.

Rachel Andrew

브라우저 지원

  • 108
  • 108
  • 52
  • 16.2

이제 모든 주요 엔진에서 first 및 last 키워드를 사용하여 정렬할 수 있습니다. 즉, 가변 항목 또는 그리드 항목 그룹을 정렬할 때 마지막 기준 정렬을 또 다른 옵션으로 사용할 수 있습니다.

첫 번째 기준 정렬

align-items 값을 baseline로 설정하면 결과가 첫 번째 기준 정렬이 됩니다. 따라서 정렬하는 항목의 첫 번째 기준 (정렬 제목이라고 함)은 그룹 내 다른 항목의 첫 번째 기준과 일치합니다. 다음 예에서는 처음 두 Flex 항목이 align-items: baseline를 사용하여 정렬되므로 더 큰 텍스트로 만든 기준을 따라 정렬됩니다. 최종 항목은 flex-start에 정렬되므로 가변형 컨테이너의 시작 부분에 맞춰 정렬됩니다.

마지막 기준 정렬

last baseline 값으로 그리드 또는 Flex 항목을 정렬하면 해당 항목의 마지막 기준이 속한 기준 공유 그룹의 마지막 기준에 맞춰 정렬됩니다. 다음 예는 첫 번째 Flex 항목이 큰 항목에서 마지막 텍스트 줄과 정렬되는 마지막 기준선 정렬을 보여줍니다. 이 그룹의 마지막 항목은 가변형 컨테이너의 끝인 flex-end에 정렬됩니다.

대체 정렬

정렬 대상에 정렬할 기준 공유 그룹이 없는 경우 대체 정렬이 사용됩니다. baseline 및 first baseline의 경우 대체 정렬은 start이고, last baseline의 경우 대체 정렬은 end입니다.