justify-content

justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.

Summary

특징	설명
기본 값	flex-start
상속	안됨
애니메이션	안됨
버전	CSS3

Definition

• justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
• justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의하고 align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다.
• justify-content 속성은 display:flex; 상태에서 적용됩니다.

Syntax

justify-content : flex-start | flex-end | center | space-between | space-around | inherit;

Property

속성 값	설명
flex-start	요소의 정렬 상태를 왼쪽(기본)으로 설정합니다.
flex-end	요소의 좌우 정렬 상태를 오른쪽 끝점으로 설정합니다.
center	요소의 좌우 정렬 상태를 가운데로 설정합니다.
space-between	요소와 요소사이의 간격을 왼쪽과 오른쪽을 기준으로 설정합니다.
space-around	요소와 요소사이의 간격을 가운데를 기준으로 설정합니다.
inherit	justify-content의 속성 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
justify-content

Sample

justify-content : flex-start;
justify-content : flex-end;
justify-content : center;
justify-content : space-between;
justify-content : space-around;