flex-grow flex-shrink 플렉스 그로우 쉬링크 사용법 예제 예시

flex-grow, flex-shrink

 

기본적인 반응형을 위해 flex라는 속성을 사용하고, 현업에서 마주친 UI 이슈의 해결책을 기록한다.

테이블을 쓰지고 않고 div로 테이블처럼 보이게끔 작업을 하고 있었다. 테이블 컬럼에는 제목, 날짜 총 2개의 컬럼이 존재하며 브라우저의 가로길이를 조작해보니, 제목이 길 경우 브라우저의 가로길이가 줄어들 수록 날짜의 위치가 다른 게시글의 날짜의 위치와 어긋나게 되는 현상을 마주쳤다. 날짜라는 div의 영역이 브라우저의 가로길이가 줄어들어도 일정한 비율을 유지하기 위해 검색을 하면서 flex-grow, flex-shrink를 찾았으며, 내 문제의 해결책은 flex-shrink 속성이었다.

 

flex-grow

플렉스 그로우

 

flex-grow는 flex박스 아이템의 기본 너비를 자동으로 지정한 비율로 나누어 준다.

이미지에서 보이듯이 wrapper라는 flex박스가 있고, 해당 flex박스에는 아이템이 총 4개가 있다.

item2라는 아이템에는 flex-grow : 2라는 속성으로 인해 다른 아이템의 가로길이보다 2배의 길이를 가지고 있다.

만약 총 너비가 1000px라면 모든 아이템의 flex-grow의 합 = 1 + 2 + 1+ 1 = 5

총 너비인 1000px / 5 = 200px ( 각 아이템의 가로길이는 200px가 기본)

하지만, item2는 속성 값이 2이기 때문에 200px * 2 = 400px의 값을 가지게 된다. 

 

flex-shrink

플렉스 쉬링크

 

flex-shrink는 아이템이 넘칠 때 어떻게 처리할지 결정한다. flex-grow의 반대라고 생각하면 이해하기 쉽다.

flex-shrink : 0 이렇게 속성 값을 정해주면, 브라우저 길이가 작아져도 해당 영역의 길이는 고정된다.