CSS 참조서

CSS @규칙(RULES)

CSS 속성 전체

CSS3 flex-grow 속성 CSS3 flex-direction 속성

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

flex-flow CSS 속성은 동시에 설정하는 데 사용됩니다flex-direction와flex-wrap각 속성의 약자 속성.

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

기본 값:	row nowrap; 모든 속성 보기
적용 대상:	플렉스 컨테이너
thừa kế:	없음
애니메이션 가능:	아니요.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.flexFlow="column nowrap"

flex-flow 사용 문법

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

flex-flow: [ flex-direction flex-wrap ] | initial | inherit

아래 예제는 flex를 사용하는 방법을 설명합니다.-flow 속성.

예제

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

테스트해 보세요‹/›

속성 값

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

값	설명
flex-direction	활성화 요소가 플렉스 컨테이너 내에서 배치될 방식을 지정합니다.
flex-wrap	활성화 요소가 행 또는 열을 분리할지 여부를 지정합니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 flex를 사용합니다.-flow 속성 값.

브라우저 호환성

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

	Firefox 18+ ^-moz-，28 Google Chrome 21+ ^-webkit-，29 Internet Explorer 10+ ^-ms-，11 Apple Safari 6。1+ ^-webkit- 오페라 12。1+

추가로 읽어보세요

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

CSS3 flex-grow 속성 CSS3 flex-direction 속성