flex-flow
CSS 속성은 flex-direction
, flex-wrap
속성의 단축 속성입니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
구문
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'>과 <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* 전역 값 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
값
자세한 내용은 flex-direction
과 flex-wrap
속성을 참고하세요.
형식 구문
예제
element {
/* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
flex-flow: column-reverse wrap;
}
명세
Specification | Status | Comment |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-flow' in that specification. |
Candidate Recommendation | Initial definition |
초기값 | as each of the properties of the shorthand:
|
---|---|
적용대상 | flex containers |
상속 | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
같이 보기
- CSS 플렉스박스 가이드: Basic Concepts of Flexbox
- CSS 플렉스박스 가이드: Ordering flex items