반응형 flex-shrink1 flex-grow flex-shrink 플렉스 그로우 쉬링크 사용법 예제 예시 flex-grow, flex-shrink 기본적인 반응형을 위해 flex라는 속성을 사용하고, 현업에서 마주친 UI 이슈의 해결책을 기록한다. 테이블을 쓰지고 않고 div로 테이블처럼 보이게끔 작업을 하고 있었다. 테이블 컬럼에는 제목, 날짜 총 2개의 컬럼이 존재하며 브라우저의 가로길이를 조작해보니, 제목이 길 경우 브라우저의 가로길이가 줄어들 수록 날짜의 위치가 다른 게시글의 날짜의 위치와 어긋나게 되는 현상을 마주쳤다. 날짜라는 div의 영역이 브라우저의 가로길이가 줄어들어도 일정한 비율을 유지하기 위해 검색을 하면서 flex-grow, flex-shrink를 찾았으며, 내 문제의 해결책은 flex-shrink 속성이었다. flex-grow flex-grow는 flex박스 아이템의 기본 너비를 자동.. 2023. 3. 21. 이전 1 다음 반응형
