div 태그를 가로/세로로 정렬하는 방법 (display: flex)

div 태그가 중첩되어 있을 때, 각각의 요소를 가로/세로 정렬하려고 한다.

2번 상자들을 가로로 정렬하고, 그 안에 들어있는 3, 4, 5 번 상자를 세로로 정렬하고 싶다고 가정한다.

구현방법

1. 2번 상자를 모두 감싸는 div(1번 상자)를 하나 만든다.
2. 1.에서 만든 모든 상자를 감싸는 최상위 div(1번 상자)에 display: flex; 를 준다. (*display: flex; -> 자식요소인 block 태그 div를 inline으로 변경시켜 가로로 정렬할 수 있게 해준다.) -> 2번 상자가 가로로 정렬된다.
3. 3번 상자 하나를 div로 묶고, 4,5번 상자를 하나의 div로 묶는다.
4. 2번 상자에 display: flex;와 flex-direction: column;을 주어 세로로 정렬할 수 있게 만든다.
5. 4,5번 상자를 묶은 div에 flex-direction: column;을 주어 세로로 정렬한다.

 

가로로 정렬하고 싶다면, 부모태그에 display: flex;만을 사용하고,  flex-direction: column; 속성을 주지 않으면 된다.