CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 flex-direction 속성 사용 방법 및 예제

flex 컨테이너의 주 축 방향을 설정하면 flex-direction CSS 속성은 flex 컨테이너 내에서 flex 아이템을 어떻게 배치할지 지정합니다.

이 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 나타냅니다.

기본 값:	row
적용:	활성 컨테이너
thừa kế:	없음
애니메이션 가능:	아니요。참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.flexDirection="row-reverse"

flex-direction 사용 문법

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

flex-direction: row | row-reverse | column | column-reverse | initial | inherit

아래 예제는 flex를 사용하는 방법을 보여줍니다.-direction 속성.

예제

.flex-container {
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display: flex;
　　　　flex-direction: row-reverse;　　　　
}

테스트 보기‹/›

속성 값

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

값	설명
row	flex 컨테이너의 주축은 현재 입력 모드의 인라인 축 방향과 같습니다. 즉, 텍스트 방향입니다.
row-reverse	row와 같지만, 축의 시작점과 끝점이 반대입니다.
column	flex 컨테이너의 주축은 현재 텍스트 방향의 블록 축(수평 쓰기 모드의 수직 축과 수직 쓰기 모드의 수평 축)의 방향과 같습니다.
column-reverse	열과 같지만, 축의 시작점과 끝점이 반대입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 flex를 사용합니다.-direction 속성 값.

브라우저 호환성

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

	Firefox 18+ ^-moz-，28 Google Chrome 21+ ^-webkit-，29 인터넷 익스플로러 10+ ^-ms-，11 Apple Safari 6。1+ ^-webkit- 오페라 12。1+

더 읽기

다음 튜토리얼을 참조하십시오:CSS3다 열 레이아웃。

CSS3 flex-flow 속성 CSS3 flex-basis 속성