HTML - Flex -shrink

• flex-shrink : 아이템의 크기가 정해졌는데 그 크기보다 적어질수있는가에 대한 속성이다

ex) 여백이 없고 오히려 크기가 적은 경우 : 고정 크기의 item 중에서 2번째만 너비를 줄어들 수 있게 하기

@import url(css/reset.css);

.s1 ul {
    display:  flex;
    flex-direction: row;
    background: gray;
}

.s1 li{
    flex-basis:  100px;
    flex-grow:1;
   
}

.s1 li:nth-child(1){
    background: red;
    flex-shrink: 0;
}

.s1 li:nth-child(2){
    background: green;
}

.s1 li:nth-child(3){
    background: blue;
}

.s1 li:nth-child(4){
    background: yellow;
}

.s1 li:nth-child(5){
    background: lightskyblue;
}

-> 1번째에 shrink 를 0으로줬는데 1번만 크기가 줄어들지않는걸 볼수있다.