Flexbox의 주축·교차축 정렬과 flex 항목의 크기 분배는 어떻게 동작하나요?

이렇게 답해 보세요 (핵심 답변)

Flexbox는 flex-direction으로 정한 주축을 따라 항목을 배치하고 수직인 교차축을 함께 정렬하는 레이아웃 모델입니다. 주축 정렬은 justify-content가, 교차축 정렬은 align-items가 담당하며, 각 항목은 flex-basis를 시작 크기로 삼아 남는 공간을 flex-grow 비율로 나누거나 부족한 공간을 flex-shrink 비율로 줄입니다. 긴 텍스트 때문에 항목이 줄어들지 않는다면 항목의 기본 최소 크기(min-width: auto)를 0으로 풀어 주어야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. flex-direction이 row일 때는 가로가 주축이지만 column으로 바뀌면 세로가 주축이 되어 정렬 속성의 방향도 함께 바뀝니다.
2. flex-wrap: wrap으로 여러 줄이 만들어지면 여백과 크기 분배는 전체가 아니라 각 줄(Flex Line)마다 독립적으로 계산됩니다.

면접에서 자주 하는 실수

모든 항목에 flex: 1을 주었다고 해서 내부 콘텐츠 크기나 flex-basis 차이와 무관하게 항상 똑같은 최종 너비가 보장되지는 않습니다.