가로로 배치되어 있는 요소들을 세로로 배치해야 될 때가 있습니다. 이때 flex-direction 를 사용하면 간단하게 처리할 수 있습니다. 값으로 column 을 주면 가능합니다.
flex-direction: column;이때 세로로 배치 된 요소들을 가운데 정렬을 하고 싶어 CSS에 아래와 같이 추가하였습니다. 하지만 요소들은 아무런 움직임이 없습니다.
justify-content: center;flex-direction: column 인 상태에서의 가운데 정렬은 align-items 를 사용하여야 합니다.
아래의 CSS를 추가하면 정상적으로 가운데 정렬이 됩니다.
align-items: center;