스타일 alignContent 속성
❮ 스타일 개체
❯
예시
줄 사이에 공백을 두고 유연한 <div> 요소의 항목을 배치합니다.
document.getElementById("main").style.alignContent = "space-between";
정의 및 사용
alignContent 속성은 항목이 교차 축(수직)에서 사용 가능한 모든 공간을 사용하지 않는 경우 유연한 컨테이너의 항목을 정렬합니다.
팁: justifyContent 속성을 사용하여 항목을 기본 축(가로)에 정렬합니다.
참고: 이 속성이 효과를 나타내려면 여러 줄의 항목이 있어야 합니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Webkit 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
alignContent | 21.0 | 11.0 | 28.0 | 9.0 7.0 Webkit |
12.1 |
통사론
alignContent 속성을 반환합니다.
object.style.alignContent
alignContent 속성을 설정합니다.
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
속성 값
Value | Description |
---|---|
stretch | Default value. Items are stretched to fit the container |
center | Items are positioned at the center of the container |
flex-start | Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 뻗기 |
---|---|
반환 값: | 요소의 align-content 속성을 나타내는 String |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: align-content 속성
HTML DOM STYLE 참조: alignItems 속성
HTML DOM STYLE 참조: alignSelf 속성
HTML DOM STYLE 참조: justifyContent 속성
❮ 스타일 개체
❯