CSS 플렉스 디렉션 속성

정의와 사용법

flex-direction 속성은 유연한 항목의 방향을 정의합니다.

주석:요소가 유연한 항목이 아니면 flex 속성이 무효합니다.

다른 것도 참조하세요:

CSS 강의:CSS 유연한 상자

CSS 참조 설명서:flex 속성

CSS 참조 설명서:flex-basis 속성

CSS 참조 설명서:flex-flow 속성

CSS 참조 설명서:flex-grow 속성

CSS 참조 설명서:flex-shrink 속성

CSS 참조 설명서:flex-wrap 속성

HTML DOM 참조 설명서:flexDirection 속성

예제

<div> 요소 내의 유연한 요소의 방향을 반대로 설정합니다:

div {
  display: flex;
  flex-direction: row-reverse; 
}

직접 테스트해 보세요

CSS 문법

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

속성 값

값 설명
row 기본 값. 행으로, 가로로 표시되는 유연한 요소.
row-reverse 동일한 행, 하지만 방향이 반대입니다.
column 열로, 가로로 표시되는 유연한 요소.
column-reverse 동일한 열, 하지만 방향이 반대입니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial。
inherit 이 속성을 부모 요소에서 thừa kế합니다. 참조 inherit。

기술 세부 사항

기본 값: row
thừa kế: 아니요
애니메이션 제작: 지원되지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.flexDirection="column-reverse"

더 많은 예제

flex-direction과 미디어 쿼리를 결합하여 다른 스크린 크기/장치에 대해 다른 레이아웃을 만듭니다:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* 반응형 레이아웃 - 두 열 레이아웃(50％) 대신 단일 열 레이아웃(100％)을 만듭니다) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

직접 테스트해 보세요

브라우저 지원

표에 기재된 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

-webkit- 또는 -moz-로 시작하는 숫자는 프리픽스를 사용하는 첫 번째 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0