Style justifyContent 속성

정의와 사용법

아이템이 주축(수평) 축에 사용되지 않은 모든 공간이 있을 때 justifyContent 속성이 유연한 컨테이너의 아이템을 정렬합니다.

힌트:사용하십시오 alignContent 속성이 가로 축(수직)에 아이템을 정렬합니다.

다른 참조:

CSS 참조 가이드:justify-content 속성

예제

활성화된 <div> 요소의 아이템 사이에 공간을 남깁니다:

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

직접 테스트해 보세요

문법

justify-content 속성 반환:

object.style.justifyContent

justify-content 속성 설정:

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

속성 값

값 설명
flex-start 기본 값. 요소가 컨테이너의 시작에 위치합니다.
flex-end 요소가 컨테이너의 끝에 위치합니다.
center 요소가 컨테이너의 중심에 위치합니다.
space-between 행 사이에 공간을 남깁니다.
space-around 행 앞, 행 사이, 행 뒤에 공간을 남깁니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: flex-start
반환 값: 문자열로 표현된 요소의 justify-content 속성.
CSS 버전: CSS3

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 12.0 지원 9.0 지원

관련 페이지

HTML DOM 스타일 참조 가이드:alignContent 속성

HTML DOM 스타일 참조 가이드:alignItems 속성

HTML DOM 스타일 참조 가이드:alignSelf 속성