[css] flex-flow, flex-direction, flex-wrap

 

flex-flow는 flex-direction과 flex-wrap 속성의 단축 속성이다.

 

따라서 flex-flow를 이해하기 위해서는 먼저 flex-direction과 flex-wrap를 이해해야한다.

 

flex-direction

flex-direction은 플렉스 컨테이너 내에서 배치할때 방향을 설정하는 것으로 가로 열방향, 행방향, 열방향 역순, 행방향 역순을 지정할 수 있다.

 

css: flex-direction 속성

 

열방향 배치

flex-direction: row;

 

열방향 역순 배치

    flex-direction: row-reverse;

 

행방향 배치

flex-direction: column;

 

행방향 역순 배치

flex-direction: column-reverse;

 

 

 

flex-wrap

flex-wrap은 flex-item 요소들이 강제로 한줄에 표시 되도록 할지 아니면 여러줄로 표현 하여 영역안에 모두 표시되도록할지 설정할 수 있다.

 

css : flex-wrap 속성

 

한줄 표시

flex-wrap: nowrap;

 

영역 내에서 여러행 표시

flex-wrap: wrap;

 

여러행 표시 역순

flex-wrap: wrap-reverse;

 

 

 

 

flex-flow

 flex-flow는 위 두개 속성을 합쳐서 앞쪽은 flex-direction설정 뒤쪽은 flex-wrap를 설정하는 것이다.

 

css : flex-flow 속성

 

정방향 여러줄 표시

flex-flow:row wrap;

flex-flow:row wrap;

역방향 한줄 표시

flex-flow: row-reverse nowrap;

 

행방향 여러행 역순 표시

flex-flow: column wrap-reverse;

 

행방향 여러행 표시

flex-flow: column wrap;

 

 

flex-flow 구문

/* 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;

 

 

참조 : https://developer.mozilla.org/ko/docs/Web/CSS/flex-flow