CSS justify-content 속성

정의와 사용법

justify-content 속성(수평)은 주축의 모든 사용 가능한 공간을 차지하지 않는 경우에弹性容器의 항목을 정렬합니다.

ヒント:사용하십시오 align-items 속성 속성을 사용하여 항목을 수직 정렬합니다.

다른 참고 자료:

CSS 강의:CSS 플렉스박스

CSS 강의:CSS Grid

CSS 참조 설명서：align-content 속성

CSS 참조 설명서：align-items 속성

CSS 참조 설명서：align-self 속성

HTML DOM 참조 설명서：justifyContent 속성

예제

컨테이너 중앙에 유연한 요소를 정렬합니다：

div {
  display: flex;
  justify-content: center;
}

직접 시도해 보세요

페이지 아래에 더 많은 TIY 예제를 찾을 수 있습니다。

CSS 문법

justify-content: flex-start|flex-end|center|space-between|space-around|initial|thừa kế;

속성 값

값 설명
flex-start 기본값。항목이 컨테이너의 시작에 위치합니다。
flex-end 항목이 컨테이너의 끝에 위치합니다。
center 항목이 컨테이너 중앙에 위치합니다。
space-between 항목이 행과 행 사이에 간격을 둡니다。
space-around 항목이 행 전에, 행 사이, 행 후에 공간을 남깁니다。
initial 이 속성을 기본값으로 설정합니다. 참조하십시오： initial。
thừa kế 이 속성을 부모 요소에서 thừa kế합니다. 참조하십시오： thừa kế。

기술 세부 사항

기본값： flex-start
thừa kế： 아니요
애니메이션 제작： 지원하지 않습니다. 참조하십시오：애니메이션 관련 속성。
버전： CSS3
JavaScript 문법： object.style.justifyContent="space-between"

더 많은 예제

예제

컨테이너의 시작에 유연한 요소를 정렬합니다(기본값)：

div {
  display: flex;
  justify-content: flex-start;
}

직접 시도해 보세요

예제

컨테이너 끝에 유연한 요소를 정렬합니다：

div {
  display: flex;
  justify-content: flex-end;
}

직접 시도해 보세요

예제

행 사이에 간격이 있는 유연한 요소를 표시합니다：

div {
  display: flex;
  justify-content: space-between;
}

직접 시도해 보세요

예제

행 전에, 행 사이, 행 후에 간격이 있는 유연한 요소를 표시합니다：

div {
  display: flex;
  justify-content: space-around;
}

직접 시도해 보세요

브라우저 지원

표에 나타난 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

이전 -webkit- 또는 -moz- 숫자 규정을 사용하는 첫 번째 버전의 프리픽스를 사용하도록 지시합니다.

속성 크롬 IE 파이어폭스 사파리 오페라
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0