wrap과 basis로 화면 폭에 따라 자연스럽게 줄이 바뀌게 합니다.
flex-wrap:wrap과 유연한 flex-basis를 조합하면 미디어 쿼리 없이도 최소 카드 폭을 지키며 다음 줄로 이동할 수 있습니다.
이번 예제의 출발점은 flex: 1 1 180px; flex-wrap:wrap;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 basis를 120px과 240px로 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
모든 item에 고정 width를 주면 중간 화면에서 빈 공간이나 넘침이 생깁니다.
직접 바꿔보세요basis를 120px과 240px로 비교하세요.