flex-wrap 문제, 컨테이너는 가운데 정렬 && 아이템은 왼쪽 정렬

문제

CSS의 flex-wrap을 이용해서 list 아이템(li)을 반응형으로 정렬하고 싶었다.

아래의 그림과 같이 list 아이템의 컨테이너(ul)는 브라우저 가운데 정렬되도록 하며, list 아이템들은 컨테이너 안에서 왼쪽 정렬하고 싶었다.

원하는 그림

그런데 브라우저의 크기를 좌우로 조절했을 때, 아래 그림과 같이 컨테이너 안의 오른쪽 공간의 크기가 아이템 너비에 미치지 못할 경우 그 공간이 여백으로 그대로 남아있는 문제가 발생했다.

아이템 3 오른쪽에 남게되는 여백

그래서 컨테이너에 justify-contents: center 값을 추가했더니, 아래 그림과 같이 컨테이너 안의 아이템들이 왼쪽 정렬되지 않는 문제가 생겼다.

아이템 가운데 정렬

해결

문제의 원인은 flex layout에서 wrap이 발생할 때 남게 되는 공간의 너비를 다시 계산해서 배치해주는 작업을 해주지 않기 때문이다.

flex 대신에 grid나 inline-block을 사용하여 문제를 해결할 수 있다.

inline-block을 사용할 경우에는 미디어 쿼리를 사용해서 스크린 너비마다 알맞은 컨테이너 너비를 설정해줘야 한다.

컨테이너(ul)의 너비는 다음과 같이 계산하며, 스크린의 최대 너비를 넘기지 않는 값으로 설정한다.

(아이템의 너비 + 아이템의 양옆 마진 값) * 아이템의 개수

코드

코드는 아래 참조에서 링크로 걸어둔 stackoverflow 답변 내용으로 대신한다.

참조

stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items

How to center a flex container but left-align flex items