반응형 Flexbox

개념 이해하기

flex-wrap:wrap과 유연한 flex-basis를 조합하면 미디어 쿼리 없이도 최소 카드 폭을 지키며 다음 줄로 이동할 수 있습니다.

각 항목은 flex-basis 180px를 출발점으로 삼고, flex-wrap: wrap이라 한 줄에 그 폭이 몇 개 들어가는지에 따라 줄이 나뉩니다. 이 실습의 .stage는 넓어도 502px라 180px 두 개와 간격 12px까지만 들어가므로 A, B와 C, D가 두 줄로 나뉘고, 각 줄의 두 항목은 grow 1에 따라 남는 공간을 나눠 같은 폭으로 늘어납니다. 화면이 더 좁아져 두 개도 들어가지 않으면 한 줄에 하나씩 쌓입니다.

줄마다 남는 공간이 따로 계산되므로 항목이 다섯 개라면 마지막 줄에 혼자 남은 E가 줄 전체로 늘어나 위의 카드들보다 두 배쯤 넓어집니다. 모든 카드의 폭이 줄과 상관없이 같아야 하는 목록은 열을 기준으로 나누는 Grid로 옮기는 편이 맞습니다.