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

Rachel Andrew

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

Browser Support

• 123
• 123
• 125
• 17.4

flex 및 그리드 레이아웃의 align-content

align-content를 사용하여 Flex 항목 또는 그리드 트랙을 정렬한 적이 있을 것입니다. 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 속성은 제목을 플렉스 컨테이너 내에서 세로로 가운데에 배치합니다.

블록 레이아웃에 align-content를 사용할 수 있으므로 속성이 작동하도록 플렉스 레이아웃을 만들지 않고도 세로 정렬을 실행할 수 있습니다. 항목이 블록 항목으로 유지되므로 추가 속성은 필요하지 않으며, 변경되는 것은 정렬뿐입니다.

align-content 속성은 블록 컨테이너 내에서 제목을 세로로 가운데에 정렬합니다 (Chrome 123 또는 Safari 17.4 이상 필요).

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

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

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

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