Flex Containers 속성 - flex-flow, flex-direction

flex-flow

이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정한다.

flex-flow: 주축 여러줄묶음;

.flex-container {
  flex-flow: row-reverse wrap;
}

값	의미	기본값
flex-direction	items의 수 축(main-axis)을 설정	row
flex-wrap	items의 여러 줄 묶음(줄 바꿈) 설정	nowrap

 

 

flex-direction

Items의 주 축(main-axis)을 설정합니다.

값	의미	기본값
row	Items를 수평축(왼쪽에서 오른쪽으로)으로 표시	row
row-reverse	Items를 row의 반대 축으로 표시
column	Items를 수직축(위에서 아래로)으로 표시
column-reverse	Items를 column의 반대 축으로 표시

flex-direction: 주축;

정렬방식 참고