CSS justify-content 속성
예시
플렉스 항목을 컨테이너 중앙에 정렬합니다.
div
{
display: flex;
justify-content: center;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
이 justify-content
속성은 항목이 기본 축(가로)에서 사용 가능한 모든 공간을 사용하지 않는 경우 유연한 컨테이너의 항목을 정렬합니다.
팁: 항목을 세로로 정렬 하려면 align-items 속성을 사용하십시오.
기본값: | 플렉스 스타트 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 아니요. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.justifyContent="공간 사이" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS 구문
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
flex-start | Default value. Items are positioned at the beginning of the container | |
flex-end | Items are positioned at the end of the container | |
center | Items are positioned in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
컨테이너 시작 부분에 플렉스 항목을 정렬합니다(기본값).
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;
}
관련 페이지
CSS 참조: align-content 속성
CSS 참조: align-items 속성
CSS 참조: align-self 속성
HTML DOM 참조: justifyContent 속성