Flexbox 레이아웃 조절판

컨테이너가 주축을 정하고, 아이템은 남는 공간과 정렬 규칙에 맞춰 유연하게 움직입니다.

flex-wrap

공간이 부족하면 다음 줄

카드 목록처럼 항목 수가 늘어날 때 줄바꿈을 맡습니다.

gap

아이템 사이 간격

마진 대신 컨테이너에서 간격을 일관되게 관리합니다.

flex-grow

남는 공간을 채움

아이템마다 확장 비율을 다르게 줄 수 있습니다.

@media

모바일 방향 전환

좁은 화면에서는 column 흐름으로 바꿔 읽기 쉽게 만듭니다.

핵심Flexbox 레이아웃 조절판은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.