flex-flow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

flex-flow CSS 속성은 flex-direction, flex-wrap 속성의 단축 속성입니다.

시도해 보기

flex-flow: row wrap;

flex-flow: row-reverse nowrap;

flex-flow: column wrap-reverse;

flex-flow: column wrap;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  max-height: 300px;
  display: flex;
}

#example-element > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

구문

css
/* 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 속성을 참고하세요.

형식 구문

flex-flow = 
  <'flex-direction'>  ||
  <'flex-wrap'>       

<flex-direction> = 
  row             |
  row-reverse     |
  column          |
  column-reverse  

<flex-wrap> = 
  nowrap        |
  wrap          |
  wrap-reverse

예제

css
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;
}

명세

초기값as each of the properties of the shorthand:
적용대상flex containers
상속no
계산 값as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

브라우저 호환성

같이 보기