Chrome 123부터 블록 및 테이블 레이아웃에서 CSS 상자 정렬의 align-content 속성을 사용할 수 있습니다. 이렇게 하면 가변 레이아웃이나 그리드 레이아웃을 만들지 않고도 블록 방향 정렬을 사용할 수 있습니다. 그러나 이러한 레이아웃 메서드 외부에서 align-content를 사용한 경우 이제 변경사항이 적용되므로 CSS를 업데이트해야 할 수 있습니다.
브라우저 지원
- 123
- 123
- 125
- 17.4
가변형 및 그리드 레이아웃의 align-content
align-content를 사용하여 Flex 항목 또는 그리드 트랙을 정렬했을 수 있습니다. Flex 레이아웃에서 align-content 속성은 Flex 컨테이너에서 교차 축에 따라 Flex 항목을 정렬하는 데 사용됩니다. 다음 예에서는 값이 space-between이므로 Flex 컨테이너에서 사용 가능한 공간을 가변 행 사이에 분산합니다.
align-content 속성은 Flex 컨테이너의 교차 축에 여유 공간이 있기 때문에 가변형 항목의 행 간격을 늘립니다.항목을 세로로 중앙에 배치
여기서 align-content는 항목을 컨테이너 내에서 세로로 중앙에 배치할 때 특히 유용합니다. 이렇게 하려면 align-content: center와 함께 display: flex를 사용합니다. 그러면 항목이 Flex 항목이 되고 다른 기본 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가 가변형 및 그리드 레이아웃에서 오랫동안 지원되었으므로 특성 쿼리를 @supports와 함께 사용하면 항상 true가 반환됩니다. Flexbox의 gap 속성에서 발생한 상황과 동일한 상황입니다. CSS Working Group은 이와 같은 부분 구현을 위한 솔루션을 살펴보고 있습니다.
사이트에 예기치 않은 정렬이 있는지 확인
align-content 속성은 수년 동안 사양에서 블록 레이아웃 관련 작업으로 정의되었습니다. 이러한 컨텍스트 외부에서 align-content를 지원하는 브라우저가 없으므로 아무 작업도 하지 않았습니다. 그러나 가변형 또는 그리드 컨테이너가 아닌 항목에 속성을 추가한 경우 Chrome 123부터 영향을 미치기 시작합니다. CSS에서 align-content를 사용하고 이 경우에 해당될 수 있다면 베타를 사용하여 사이트와 애플리케이션을 테스트합니다.