부모의 방향, 줄바꿈과 양축 정렬을 설정합니다.
flex-direction이 주축, justify-content가 주축 정렬, align-items가 교차축 정렬을 정합니다. flex-wrap을 켜면 공간이 부족할 때 다음 줄로 이동합니다.
이번 예제의 출발점은 display:flex; justify-content:space-between; align-items:center;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 justify-content와 align-items 값을 각각 바꾸세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
direction이 column일 때 justify-content가 세로 방향이라는 점을 놓치기 쉽습니다.
직접 바꿔보세요justify-content와 align-items 값을 각각 바꾸세요.