CSS Flex는 flex-direction 어떻게 사용할까?

플레서블 박스 (Flexible box)는 플렉스 박스(Flexbox)라고 불리는 친구입니다.

CSS3에서 처음 소개된 레이아웃 명령어? 모델? 무튼 그렇습니다.

이 친구는 다른 크기의 화면에서도 Html 요소들이 자동으로 재정렬되는 유연함을 가진 친구입니다.

 

See the Pen Untitled by Hokyun (@Grayruma) on CodePen.

또 FlexBox를 따라다니는 친구들이 있는데요.

display / flex-direction / justify-content / align-items / flex-wrap / flex-flow / align-content

이 중에서 오늘은 flex-direction 을 알아보려고 합니다.

 

flex-direction

flex-direction 속성은 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향을 설정하는 역할을 하는데요.

다음과 같은 속성값을 가질 수 있습니다.

 

※ row

기본 설정으로 플렉스 요소는 왼쪽 > 오른쪽 , 위 > 아래로 배치됩니다.

 

※ row-reverse

direction 속성값이 left-to-right이라면 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치됩니다.

See the Pen Untitled by Hokyun (@Grayruma) on CodePen.

 

※ column

쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치됩니다.

 

※ column-reverse

쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치됩니다.

 

See the Pen flex-direction by Hokyun (@Grayruma) on CodePen.