영화 검색 사이트: flex-shrink, flex-grow, 가운데 점( · ) 추가, 사진 해상도 변경

28 Feb 2023 • TIL • Project

flex-shrink

컨테이너의 크키가 부족해질 때, 아이템의 크기가 얼마나 줄어들 수 있는지를 나타낸다.
기본값은 1이다. 값이 1일때, 컨테이너 사이즈에 따라 자동으로 축소된다.
아이템의 크기가 축소되지 않게 하려면 값을 0으로 바꿔주면 된다.

flex-grow

컨테이너의 공간이 남을 경우 각 아이템들의 크기가 얼마나 더 할당이 가능한지 타나낸다.
만약 컨테이너 사이즈가 600px이고 아이템 1은 100px, 2는 200px일때, 컨테이너는 300px이 남는다. 아이템들에 flex-grow 값을 1은 1, 2는 2로 할당하면 남은 컨테이너 크키만큼 각 아이템들이 커진다. 따라서 1은 200px, 2는 400px이 된다.

More …