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 이렇게 속성 값을 정해주면, 브라우저 길이가 작아져도 해당 영역의 길이는 고정된다.
'지식' 카테고리의 다른 글
SVG 사이즈 타이틀 SVG란 SVG 정의 SVG 수정 (0) | 2023.03.22 |
---|---|
TypeScript TS 타입스크립트란 정의 의미 (0) | 2023.03.21 |
HTML CSS 기초 웹사이트 표준 접근성 크로스 브라우징 (0) | 2023.03.21 |
정적 타입과 동적 타입 언어의 차이점 (0) | 2023.03.21 |
SQLite MySQL PostgreSQL 차이 장단점 (0) | 2023.03.17 |
댓글