Flexbox 복습

한 방향 정렬은 Flexbox로 시작합니다

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

컨테이너의 주축

logo menu button

justify-content

주축 방향의 남는 공간을 나눕니다.

align-items

교차축 방향의 높낮이를 맞춥니다.

flex-wrap

공간이 부족하면 다음 줄

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

gap

아이템 사이 간격

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

flex-grow

남는 공간을 채움

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

@media

모바일 방향 전환

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