flex-direction: column 을 사용하여 세로로 가운데 정렬을 하려다 보면 제대로 CSS 가 먹히지 않는 경우를 볼 수 있습니다.
flex-box는 크기를 가진 공간 안에서만 작동하게 되므로, 높이를 설정해줘야 합니다.
위 그림처럼, 부모 container의 height 값을 설정해주게 되면, item들이 세로로 가운데 정렬이 된 배치를 볼 수 있습니다.
열심히 잘 따라오셨나요? 🏃♂️🏃♂️ 이제는 여러분들이 스스로 찾아보면서 공부해 볼 시간입니다!
지금까지 배운 내용을 바탕으로 아래 작성된 키워드에 대해서 추가적으로 공부해보고, 다음 시간까지 Velog, Notion 등에 정리해보세요 😊