flex-direction 속성이란?

💡학습 목표💡

• 주 축(main axis)과 교차 축(cross axis)
• flex-direction: row, row-reverse, column, column-reverse

 

FlexBox의 두 개의 축

flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 됩니다. 주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있습니다. flex-direction의 기본값은 row입니다.

1. 주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향입니다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 됩니다.
2. 교차축 방향(cross axis ) : Flex container의 주축에 직각을 이루는 축으로 주축이 수평이며 교차축은 수직 방향이 됩니다.

 

flex-direction 속성이란?

flex-direction 속성은 주 축의 방향을 설정합니다.

• row: 아이템들을 수평으로 배치합니다 (기본값).
• row-reverse: 아이템들을 수평으로 배치하되, 반대 방향으로 배치합니다.
• column: 아이템들을 수직으로 배치합니다.
• column-reverse: 아이템들을 수직으로 배치하되, 반대 방향으로 배치합니다.