flex-wrap 의 한계 극복하기

flexbox 를 사용하면서 grid 에 비해 아쉬운 부분 중 하나는 아래처럼 항목을 정렬하는 경우입니다. 고정된 이미지 영역의 좌우 끝을 컨테이너에 맞추고 사이 여백만 유동적으로 적용해야 합니다.

justify-content: space-between; 을 쓰기에는 비율에 따라 늘어나는 컨테이너 때문에 한줄에 4개를 유지할 수 없고, width를 25%로 하면 좌우에 박스 끝선을 맞출 수 없습니다.

flexbox 기능만을 사용하면서 사이즈 계산으로 문제를 극복하는 트릭을 만들었습니다.

컨테이너 사이즈를 (100% + (100% – 아이콘사이즈 * 컬럼개수) / (컬럼개수-1)) 로 적용하고 좌측 여백만큼 left 를 마이너스로 이동시키는 트릭입니다. left 이동은 편의상 translate 로 했지만 웹킷계열에서 소수점사이즈의 흐려짐 문제가 생기면 calc계산식으로 바꿀 수도 있습니다.

아래는 jsfiddle 예제입니다.

jsfiddle 링크 바로가기