Style alignContent 속성

정의와 사용법

항목이 수평 축(수직)에 모든 사용 가능한 공간을 사용하지 않을 때alignContent 속성을 사용하여 플렉시블 컨테이너의 항목을 정렬합니다。

ヒント：사용하십시오 justifyContent 속성 주축(수평)에 항목을 정렬합니다。

주의사항：이 속성이生效하기 위해서는 여러 행 항목이 있어야 합니다。

예제

플렉시블 <div> 요소의 항목을 공간이 있는 두 행 사이에 배치합니다：

document.getElementById("main").style.alignContent = "space-between";

직접 시도해 보세요

문법

alignContent 속성 반환：

object.style.alignContent

alignContent 속성 설정：

object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"

속성 값

값 설명
stretch 기본 값。행이 남은 공간을 차지하도록 확장됩니다。
center 항목이 컨테이너의 중앙에 위치합니다。
flex-start 항목이 컨테이너의 시작에 위치합니다。
flex-end 항목이 컨테이너의 끝에 위치합니다。
space-between 항목이 공간이 있는 행 간에 위치합니다。
space-around 항목의 행 전, 행 간, 행 후에 공백을 남깁니다。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 이 속성을 부모 요소에서 상속합니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： stretch
반환 값： 문자열로, 요소의 align-content 속성。
CSS 버전： CSS3

브라우저 지원

alignContent CSS3 (1999) 기능입니다。

모든 브라우저가 완전히 지원합니다：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
지원 지원 지원 지원 지원 11

관련 페이지

CSS 레퍼런스 매뉴얼：align-content 속성

HTML DOM 스타일 레퍼런스 매뉴얼：alignItems 속성

HTML DOM 스타일 레퍼런스 매뉴얼：alignSelf 속성

HTML DOM 스타일 레퍼런스 매뉴얼：justifyContent 속성