[CSS] flex 자식 요소 분할 방법

display: flex; 스타일을 사용할 경우 해당 자식 요소들이 두개, 세개 네개 등등 ... 몇개로 분할하고, gap (자식요소 간 사이)를 어떻게 할 것이냐에 따라서 혼동이 오는 경우가 있다. 

만약 gap을 32px와 24px로 하고, (gap: 32px 24px;는 row-gap:32px; column-gap:24px;의 줄임 표현입니다.)

자식 요소를 세개씩 나열 한다고 하면 자식요소에 flex를 다음과 같이 주면 된다.

flex: 0 1 calc(100%/3 - 24px/3*2);
width: 33.33%;

여기서 flex는

flex-grow와 flex-shrink, flex-basis의 줄임 표현으로, 

flex-grow를 0으로 한 이유는 만약 한줄에 세개 자식요소가 없고 하나 또는 두개가 있을 경우에도 해당 flex-basis를 유지한다는 의미이다. 

flex-basis는 min-width와 비슷한 의미로 최소한의 너비를 확보한다는 의미이다.

 

CSS3의 flex를 사용한 자식요소 분할 방법

flex-basis를 CSS3의 calc 함수를 통하여 너비를 정의한 것인데, 자세히 살펴보면

calc(100%/3 - 24px/3*2);

기본 블록 요소의 너비가 100%이고 세개로 분할 예정이므로 3으로 나누고 값을 둔다.

그리고 오른편에 있는 24px/3*2 의 의미는 column-gap이 24px이므로 column-gap를 분할 개수 3만큼 나누고 gap이 실제적으로 두번 들어가므로 2를 곱한다.