CSS 플렉스 플로우 속성

정의와 사용법

flex-flow 속성은 다음 속성의 단축 속성입니다:

주석:활성화 요소가 플렉시블 요소가 아니면 flex 속성은 무효입니다.

추가로 참조:

CSS 강의:CSS 플렉시블 블록

CSS 참조 가이드:flex 속성

CSS 참조 가이드:flex-direction 속성

CSS 참조 가이드:flex-basis 속성

CSS 참조 가이드:flex-grow 속성

CSS 참조 가이드:flex-shrink 속성

CSS 참조 가이드:flex-wrap 속성

HTML DOM 참조 가이드:flexFlow 속성

예제

활성화 요소를 반대 방향으로 표시하고 필요할 때 줄바꿈합니다:

div {
  display: flex;
  flex-flow: row-reverse wrap;
}

직접 시도해 보세요

CSS 문법

flex-flow: flex-direction flex-wrap|initial|inherit;

속성 값

값 설명
flex-direction

가능한 값:

  • row
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit

기본 값은 "row"입니다.

활성화 요소의 방향을 정의합니다.
flex-wrap

가능한 값:

  • nowrap
  • wrap
  • wrap-reverse
  • initial
  • inherit

기본 값은 "nowrap"입니다.

활성화 요소가 줄바꿈해야 하는지 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조 initial.
inherit 이 속성을 부모 요소에서 thừa kế합니다. 참조 inherit.

기술 세부 사항

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

브라우저 지원

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

跟随 -webkit-、-ms- 또는 -moz-의 숫자 규정을 사용하기 전에 첫 번째 버전을 사용합니다.

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