CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 justify-content 속성 사용 방법 및 예제

justify-content 속성은 주 축(가로 축) 방향에서 플렉시블 박스 요소의 정렬 방식을 설정하거나检索합니다.

이 표는 이 속성의 사용 설명과 버전 기록, 그리고 자바스크립트 스크립트에서 이 속성을 사용하는 문법을 포함하고 있습니다.

기본 값:	flex-start
적용:	탄력적 컨테이너
thừa kế:	아니요
애니메이션 가능:	아니요보기: 애니메이션 속성。
버전:	CSS3의 새로운 기능
JavaScript 문법:	object.style.justifyContent="space-around"

내용 사용 문법을 증명합니다

이 속성의 문법은 다음과 같습니다:

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

다음 예제는 justify를 사용하는 방법을 보여줍니다-content 속성.

예제

.flex-container {
　　　　　　/*　사파리　*/
　　　　　　display:　-webkit-flex;
　　　　　　-webkit-justify-content: space-around;
　　　　　　
　　　　　　display: flex;
　　　　　　justify-content: space-around;
　　}

테스트해 보세요‹/›

속성 값

아래 표는 이 속성의 값을 설명합니다

값	설명
flex-start	탄력적 항목이 컨테이너 행의 시작에 위치합니다. 기본 값입니다
flex-end	탄력적 항목이 행의 끝에 위치합니다
center	항목이 컨테이너의 중앙에 위치합니다
space-between	탄력적 항목이 선에 균일하게 분포합니다
space-around	탄력적 항목이 균일하게 분포하여 두 인접 항목 간의 공간이 같도록 합니다
initial	이 속성을 기본 값으로 설정합니다
inherit	지정된 경우, 부모 요소의 justify를 사용하는 관련 요소가 됩니다-content의 속성 값.

브라우저 호환성

justify-content 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 18+ ^-moz-，28+ Google 크롬 21+ ^-webkit-，29+ 인터넷 익스플로러 11+ Apple 사파리 6。1+ 오페라 12。1+

추가로 읽어보세요

다음 튜토리얼을 참조하세요:CSS 폰트，CSS 단위，CSS 패seudo 요소。

CSS 왼쪽 속성 CSS 높이 속성