CSS flex-shrink 속성 – 플렉스 아이템 크기가 상대적으로 축소되는 비율 설정

.flex-container { /* 플렉스 컨테이너 */
    display: flex;
    width: 330px;
    border: 4px dashed silver;
    flex-direction: row; /*  플렉스 아이템의 배치 방향이 '가로 축'이므로
                             플렉스 아이템의 주축 방향의 크기는 '너비'임 */
}
.item { /* 플렉스 아이템 */
    flex-basis: 150px; /* 모든 플렉스 아이템의 너비 기준을 150px로 한다는 뜻 */
    flex-grow: 0; /* 플렉스 컨테이너(부모)에 남는 공간이 있더라도
                     크기를 키우지 않고 그대로 둔다는 뜻 */
}
.item-1, .item-3 {
    border: 4px solid gray;
    background-color: silver;
    flex-shrink: 1; /* 플렉스 컨테이너(부모)의 공간이 부족할 경우
                       플렉스 아이템들이 부족한 공간만큼의 크기를 나누어 축소될 때
                       해당 플렉스 아이템이 축소될 비율 값을 1로 설정한다는 뜻 */
}
.item-2 {
    border: 4px solid red;
    background-color: yellow;
    flex-grow: /* value <= 라이브 데모에서 동적으로 구현
                  값 변경에 따라 남는 공간 배분 비율이 달라짐 */
}