CSS flex-basis 속성 – 플렉스 아이템 크기 계산의 기준 설정

.flex-container { /* 플렉스 컨테이너 */
    display: flex;
    border: 4px dashed silver;
    flex-direction: row; /*  플렉스 아이템의 배치 방향이 '가로 축'이므로
                             flex-basis는 플렉스 아이템의 너비를 기준으로 한 크기를 설정함 */
}
.item { /* 플렉스 아이템 */
    border: 4px solid blue;
    background-color: silver;
    flex-grow: 0; /* 남는 공간이 있어도 플렉스 아이템이 전혀 커지지 않는다는 뜻 */
    flex-shrink: 0; /* 공간이 부족하더라도 플렉스 아이템이 전혀 축소하지 않는다는 뜻 */
    flex-basis: auto; /* 플렉스 아이템의 본래 콘텐츠 너비를 기준으로 한다는 뜻 */
}
.item.item-2 {
    background-color: yellow;
    flex-basis: /* value <= 라이브 데모에서 동적으로 구현 */
}