오늘은 싸피에서 공부한 CSS 중 flex-grow와 flex-shrink에 대해 정리해보려고 한다. 이번 기회에 예제 코드를 직접 짜보고 확실히 짚고 넘어가자.

flex-basis

#container {
    margin: 10vw 0;
    border: 1px solid blue;
    display: flex;
}

#container > span {
    border: 1px solid red;
    flex-basis: 80px;
}

.
.

.

.
.
.

flex를 적용한 컨테이너의 각 자식 요소들이 main 축을 따라 얼마나 많은 부분을 차지하고 있는지를 나타낸다.

flex-grow

부모 요소인 container가 (자식 요소들의 개수 * flex-basis)보다 길게 늘어져있을 때 남는 공간이 생기게 된다. 이 때 flex-grow를 적용한 자식 요소들은 남는 공간을 flex-grow 속성에서 각각 지정한 비율대로 추가적으로 차지한다.

코드와 그림으로 예를 들어 보자.

#container {
    margin: 10vw 0;
    border: 1px solid blue;
    display: flex;
}

#container > span {
    border: 1px solid red;
    flex-basis: 80px;
}

#container>span:nth-child(9) {
    background-color: aqua;
    flex-grow: 1; /* 남는 공간의 1/4을 가져감. */
}

#container > span:nth-child(10) {
    background-color: aqua;
    flex-grow: 3; /* 남는 공간의 3/4을 가져감. */
}

각 child의 flex-basis는 80이다. 그리고 child9의 너비는 142px이고, child10의 너비는 266px이다.

10개의 요소들이 딱 들어 맞으려면 container의 너비가 800px이어야 하는데, 현재 브라우저 창 너비를 늘려서 1048px이 되었다. 그럼 남는 공간이 1048px - 800px = 248px이 된다.

child9에는 flex-grow를 1을 지정했고, child10에는 flex-grow를 3으로 지정했기 때문에 각각 남는 공간인 248px의 1/4, 3/4에 해당하는 62px과 186px을 flex-basis에 더해 추가적으로 가져가게 된다.

그렇게 해서 child9는 80px + 62px = 142px이 되고, child10은 80px + 186px = 266px이 되는 것이다.

다음으로는 flex-shrink에 대해 알아보자.

flex-shrink

#container {
    margin: 10vw 0;
    border: 1px solid blue;
    display: flex;
}

#container > span {
    border: 1px solid red;
    flex-basis: 80px;
    flex-shrink: 0; /* container의 너비가 요소 너비의 총합보다 줄어들어도 요소의 너비는 줄어들지 않음.*/
}

#container > span:nth-child(9) {
    background-color: aqua;
    flex-shrink: 1;
}

#container > span:nth-child(10) {
    background-color: aqua;
    flex-shrink: 2;
}

이번에는 800px보다 더 좁은 709px로 브라우저 창 너비를 줄여보았다. 이 때 자식 요소들에 flex-shrink: 0을 지정했기 때문에 child1 ~ child8까지는 줄어들지 않는다.

하지만 child9에는 flex-shrink: 1을 지정하고, child10에는 flex-shrink: 2를 지정했기 때문에, 너비가 지정한 비율만큼 줄어들게 된다. 결과적으로는 child9는 49px이 되고, child10은 20px이 되었는데, 왜 이런 값이 나왔는지 알아보자.

현재 709px이면 91px이 부족한 상황이다. 자식 요소 중 누군가는 줄어들어줘야 넘쳐 흐르지 않는다. 이때 flex-shrink: 1을 지정한 child9는 91px의 1/3인 약 30px만큼 줄어들어서, flex-basis인 80px - 30px인 약 49px이 되었다. 그리고 flex-shrink: 2를 지정한 child10은 91px의 2/3에 해당하는 약 60px만큼 줄어들어서, flex-basis인 80px - 60px인 약 20px이 되었다.