flex-direction: column;

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

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