블록 및 테이블 레이아웃에서 콘텐츠 정렬 지원

Rachel Andrew

Chrome 123부터 블록 및 표 레이아웃에서 CSS Box Alignment의 align-content 속성을 사용할 수 있습니다. 이렇게 하면 flex 또는 그리드 레이아웃을 만들지 않고도 블록 방향 정렬을 사용할 수 있습니다. 하지만 이러한 레이아웃 메서드 외부에서 align-content를 사용한 경우 이제 적용되므로 CSS를 업데이트해야 할 수 있습니다.

Browser Support

• 123
• 123
• 125
• 17.4

플렉스 및 그리드 레이아웃의 align-content

align-content를 사용하여 플렉스 항목이나 그리드 트랙을 정렬해 본 적이 있을 것입니다. Flex 레이아웃에서 align-content 속성은 교차축에서 Flex 항목을 정렬하기 위해 Flex 컨테이너에 사용됩니다. 다음 예시에서는 값이 space-between이므로 플렉스 컨테이너의 사용 가능한 공간을 플렉스 행 사이에 분배합니다.

align-content 속성은 Flex 컨테이너에 교차축의 여유 공간이 있기 때문에 Flex 항목의 행에 간격을 둡니다.

항목을 세로로 중앙에 배치

align-content은 컨테이너 내에서 항목을 세로로 중앙에 배치하는 데 특히 유용합니다. 이렇게 하려면 align-content: center과 함께 display: flex을 사용합니다. 이렇게 하면 항목이 플렉스 항목이 되고 다른 기본 플렉스 항목 동작도 적용됩니다. 다음 예에서 제목은 align-content: center로 세로로 가운데에 배치되어 있습니다. 이로 인해 항목이 콘텐츠에 맞게 축소되므로 항목에 flex-grow: 1를 적용해야 합니다.

align-content 속성은 Flex 컨테이너 내에서 제목을 세로로 중앙에 배치합니다.

블록 레이아웃에 align-content를 사용할 수 있으므로 속성이 작동하도록 플렉스 레이아웃을 만들지 않아도 세로 정렬을 달성할 수 있습니다. 상품이 블록 상품으로 유지되고 정렬만 변경되므로 추가 속성은 필요하지 않습니다.

align-content 속성은 블록 컨테이너 내에서 제목을 세로로 중앙에 배치합니다 (Chrome 123 또는 Safari 17.4 이상 필요).

블록 레이아웃에서 align-content 지원 테스트

블록 레이아웃에서 align-content 지원을 테스트할 수는 없습니다. align-content는 flex 및 그리드 레이아웃에서 오랫동안 지원되었으므로 @supports와 함께 기능 쿼리를 사용하면 항상 true가 반환됩니다. 이는 플렉스박스의 gap 속성에서 발생한 상황과 동일합니다. CSS 작업 그룹은 이와 같은 부분 구현을 위한 솔루션을 모색하고 있습니다.

사이트에서 예기치 않은 정렬 확인

align-content 속성은 사양에서 블록 레이아웃에서 작동하는 것으로 수년 동안 정의되어 왔습니다. 이러한 컨텍스트 외부에서 align-content를 지원하는 브라우저가 없으므로 아무 작업도 실행되지 않았습니다. 하지만 플렉스 또는 그리드 컨테이너가 아닌 항목에 속성을 추가한 경우 Chrome 123부터 효과가 나타나기 시작합니다. CSS에서 align-content 사용을 검색하고 베타를 사용하여 사이트와 애플리케이션을 테스트합니다.