css flex의 flex-direction옵션에 대해

Posted by negabaro kim on Friday, March 12, 2021 Tags: css/flex   1 minute read

flex-direction

Items의 주 축(main-axis)을 설정

아이템들을 어느쪽으로 배치할지 정하는 옵션이다.

자주 쓰는 옵션은 row(가로 배치), coumn(세로 배치))

row(★★★)

디폴트값.

텍스트의 자식 요소와 같은 방향으로, 일반적으로 flex 아이템은 왼쪽에서 오른쪽으로 수평으로 배치

image

row-reverse

row 속성값의 반대로, flex 아이템은 오른쪽에서 왼쪽으로 수평 방향으로 배치

image

column(★★★)

flex 아이템은 위에서 아래로 수직 방향으로 배치

image

column-reverse

flex 아이템은 아래에서 위로 수직 방향으로 배치

image


참고

MDN

헤로피 CSS Flex완벽 가이드

Main Axis and Cross Axis