CSS flex-grow 속성 – 플렉스 아이템 크기를 키우는 비율 설정

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