CSS flex-direction 자식요소 배치 순서 정하기

태그 블록 요소는 세로로 쌓이는 속성을 가지고 있습니다. 크기를 가지고 있기 때문이죠. 불과 얼마전까지만해도 flex를 사용할 수 없었던 시절에는 블록 요소를 가로로 정렬하기 위해 float 이라는 스타일 속성을 사용했었습니다. 물론 지금도 이 속성을 이용하고 있는 편입니다. 그렇지만 반드시 뒤따라오는 요소에서 clear:both; 를 해줘야만 하는 불편함이 있습니다. 또한 float은 가로 정렬에 대해서만 정의합니다. 만약 세로로 배치된 요소를 서로 반전시키려면 HTML의 태그 순서를 바꾸거나 transform으로 180도 돌리는 방법을 구사해야만 할 것입니다. 이제 이런 불편함을 한방에 해결하는 flex-direction 사용 방법을 알아봅시다.

 

flex-direction

여느때와 마찬가지로 예시를 먼저 살펴보겠습니다.

 

See the Pen CSS flex-direction by rgy0409 (@rgy0409) on CodePen.

 

먼저 빨간색 백그라운드 컨테이너는 가로로 배치된 경우, 반전된 색상의 컨테이너는 세로 배치 경우입니다. HTML의 기본 뼈대 구조는 4개 모두 동일합니다. 다만 빨간색 백그라운드 컨테이너와 반전 컨테이너 부모요소는 좀 더 구분을 명확하게 하기 위해서 사이즈를 서로 반전시켰습니다. 자식 요소에 들어간 속성에 대해서 자세히 살펴봅시다.

 

flex-direction: row; ▶ 행에 대한 정렬 / 좌측부터 순차적으로 정렬 (기본값)

flex-direction: row-reverse; ▶ 행에 대한 정렬 / 우측부터 반전되어 정렬

flex-direction: column; ▶ 열에 대한 정렬 / 위쪽부터 순차적으로 정렬

flex-direction: column-reverse; ▶ 열에 대한 정렬 / 아래쪽부터 반전되어 정렬

 

row와 column은 각각 행과 열이라는 개념이죠. 엑셀에서의 행은 가로축을, 열은 세로축을 의미합니다. reverse는 반전이라는 뜻이구요. 이렇게 영단어만 조합해서 생각해봐도 어떤 식으로 배치가 될지는 대충 짐작이 됩니다. 크게 어려운 부분은 없을 것으로 생각됩니다. 특히 row는 float: left; 와 동일한 배치가, row-reverse는 float: right; 와 같은 배치가 진행된다고 생각하시면 되며 column은 row의 세로 버전이라고 생각하시면 기억하기 쉽습니다. 끝.