한 축을 중심으로 항목을 유연하게 배치합니다.
Flexbox는 주축과 교차축을 기준으로 항목의 크기와 정렬을 제어합니다. 메뉴, 버튼 묶음, 카드 한 줄처럼 한 방향 관계가 핵심인 UI에 적합합니다.
이번 예제의 출발점은 display:flex; gap:12px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 flex-direction을 column으로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
행과 열을 동시에 정확히 맞춰야 하는 전체 격자에는 Grid가 더 단순할 수 있습니다.
직접 바꿔보세요flex-direction을 column으로 바꿔보세요.