Style flexDirection 속성

정의와 사용법

flexDirection 속성을 설정하거나 반환하여 융합 요소의 방향을 정의합니다.

주석:요소가 융합 요소가 아니면 flexDirection 속성이 유효하지 않습니다.

다른 참조:

CSS 참조 매뉴얼:flex-direction 속성

예제

<div> 요소 내 융합 요소의 방향을 다시 정렬합니다:

document.getElementById("main").style.flexDirection = "column-reverse";

직접 시험해 보세요

문법

flex-direction 속성 반환:

object.style.flexDirection

flex-direction 속성 설정:

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

속성 값

값 설명
row 기본 값. 융합 요소가 세로로 표시되어 한 행으로 보입니다.
row-reverse row과 동일하지만 순서가 반대입니다.
column 융합 요소가 가로로 표시되어 한 열로 보입니다.
column-reverse column과 동일하지만 순서가 반대입니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조: inherit.

기술 세부 사항

기본 값: row
반환 값: 문자열, 요소의 flex-direction 속성.
CSS 버전: CSS3

브라우저 지원

표의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 11.0 지원 9.0 지원

관련 페이지

HTML DOM STYLE 참조 매뉴얼:flex 속성

HTML DOM STYLE 참조 매뉴얼:flexBasis 속성

HTML DOM STYLE 참조 매뉴얼:flexFlow 속성

HTML DOM STYLE 참조 매뉴얼:flexGrow 속성

HTML DOM STYLE 참조 매뉴얼:flexShrink 속성

HTML DOM STYLE 참조 매뉴얼:flexWrap 속성