CSS 플렉스 아이템 크기 설정 원리 – 자동으로 유연하게 꽉 채우거나 축소하기

올바른 이해와 사용 방법

flexbox에서는 플렉스 아이템의 크기를 유연하게 설정할 수 있습니다.
여기에서는 플렉스 아이템의 크기를 설정하는 원리와 유연하게 조정하는 방법에 대해 알아봅니다.

플렉스 레이아웃의 큰 특징 중 하나는 플렉스 아이템의 크기를 유연하게 조정할 수 있다는 점입니다.

특징

플렉스 아이템의 크기를 유연하게 설정할 수 있습니다.
- 사용되지 않는 플렉스 컨테이너 공간을 채우기 위해 플렉스 아이템의 크기가 자동으로 커지게 하거나,
- 플렉스 컨테이너를 넘치지 않도록 크기가 자동으로 축소되도록 지정할 수 있습니다.
플렉스 아이템의 크기를 유연하지 않게 명시적으로 설정할 수도 있습니다.
이 모든 것들을 플렉스 아이템 별로 적용할 수 있습니다.

플렉스 아이템의 '크기'란?

flexbox에서 말하는 플렉스 아이템의 크기란 플렉스 아이템의 배치 방향이 '가로'일 때는 '너비'를, '세로'일 때는 '높이'를 말합니다.

부연 설명
플렉스 아이템을 가로 또는 세로 방향으로 배치하기 위해서는 flex-direction 속성을 사용합니다.

플렉스 아이템의 '크기 설정' 원리

플렉스 아이템의 '크기'는 앞서 설명한 것처럼 유연하지 않게 하거나, 유연하게 설정할 수 있습니다.

이 설정은 일반적인 '블록 레이아웃'처럼 특정한 하나의 속성으로 설정하는 방식과는 다릅니다.

flexbox에서 플렉스 아이템의 '크기'는 flex-basis, flex-grow, flex-shrink 속성이 함께 작동하여 최종 크기를 결정한다는 것을 알아야 합니다.

플렉스 아이템의 '크기를 결정하는 속성들
`flex-basis`	플렉스 아이템의 기준(basis) 크기를 지정합니다.
`flex-grow`	모든 플렉스 아이템에 설정한 `flex-basis`를 모두 합한 크기가 플렉스 컨테이너 공간 크기보다 클 경우에 해당하는 플렉스 아이템을 유연하게 더 크게 키울지, 아니면 그대로 둘지를 설정합니다.
`flex-shrink`	모든 플렉스 아이템에 설정한 `flex-basis`를 모두 합한 크기가 플렉스 컨테이너 공간 크기보다 작을 경우에 해당하는 플렉스 아이템을 유연하게 더 작게 축소시킬지, 아니면 그대로 둘지를 설정합니다.

플렉스 아이템 크기의 결정 방식을 순서대로 설명하자면 다음과 같습니다.

브라우저는 먼저 플렉스 아이템들의 flex-basis 값을 합산하여 플렉스 컨테이너(부모) 내의 남는 공간을 파악합니다.
남는 공간이 있다면, 플렉스 아이템들은 각각 flex-grow 속성의 설정 값에 따라 크기를 키우거나 그대로 둘지를 결정하며,
남는 공간이 없이 부족하다면, 플렉스 아이템들은 각각 flex-shrink 속성의 설정 값에 따라 크기를 축소하거나 그대로 둘지를 결정합니다.

자주 사용하는 플렉스 아이템 '크기 설정' 조합

아래 목록은 플렉스 아이템의 크기를 설정할 때 가장 자주 사용되는 네 가지 설정 조합과 그 효과를 요약한 것입니다.

flex-basis: auto, flex-grow: 0, flex-shrink: 1

해당 플렉스 아이템의 크기를 계산할 때 플렉스 컨테이너(부모)의 "남는 공간이 있더라도 크기를 키우지 않고 그대로 두지만, 부족한 공간이 있으면 줄어들 수 있으며, 크기는 자신의 최소 콘텐츠 크기만큼만 유지한다"라는 의미입니다. (이 조합의 설정은 플렉스 아이템의 크기를 설정하지 않았을 때의 초기 설정값과 동일합니다.)
flex-basis: auto, flex-grow: 1, flex-shrink: 0

해당 플렉스 아이템의 크기를 계산할 때 플렉스 컨테이너(부모)의 "남는 공간이 있으면 크기를 키우지만, 부족한 공간이 있으면 줄어들게는 하지 않고, 크기는 자신의 콘텐츠가 가진 크기만큼만 유지한다"라는 의미입니다.
flex-basis: auto, flex-grow: 1, flex-shrink: 1

해당 플렉스 아이템이 "자신의 콘텐츠 크기(auto)를 기준으로 남는 공간이 있으면 공간을 가득 채우기 위해 크기를 키우고, 부족한 공간이 있으면 줄어들 수도 있는 유연한 상태"라는 의미입니다.
flex-basis: auto, flex-grow: 0, flex-shrink: 0

해당 플렉스 아이템의 "유연성을 완전히 제거하여, 남는 공간이 있어도 커지지 않고 공간이 부족해도 줄어들지 않으며, 오직 자신의 콘텐츠가 가진 원래 크기(auto)를 기본적으로 유지한다"라는 의미입니다.

눈의로 보는 플렉스 아이템 '크기 설정' 예제

flexbox에서 플렉스 아이템의 '크기' 설정에 대해 눈으로 직접 확인하며 예제로 이해하는 것이 중요합니다.

모든 플렉스 아이템의 너비를 자동으로 꽉 채우기

모든 플렉스 아이템에 flex-basis: auto, flex-grow: 1, flex-shrink: 1을 설정하면, 플렉스 컨테이너의 크기가 커지거나 작아지더라도 모든 플렉스 아이템의 너비를 자동으로 꽉 채울 수 있습니다.

flex-basis: auto, flex-grow: 1, flex-shrink: 1 설정 조합은
해당 플렉스 아이템이 "자신의 콘텐츠 크기(auto)를 기준으로 남는 공간이 있으면 공간을 가득 채우기 위해 크기를 키우고, 부족한 공간이 있으면 줄어들 수도 있는 유연한 상태"라는 의미입니다.

CSS

.container {
    display: flex;
    flex-direction: row; /* 플렉스 아이템의 배치 방향이 '가로 축'이므로
                            플렉스 아이템의 주축 방향의 크기는 '너비'가 됨 */
    border: 4px dashed silver;
}  
.item { /* 플렉스 아이템 */
    border: 4px solid blue;
    background-color: yellow;
    /* 모든 플렉스 아이템의 너비를 자동으로 꽉 채우기 */
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
} 
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

유연하지 않은 (고정 크기의) 플렉스 아이템 크기 만들기

플렉스 레이아웃의 큰 특징 중 하나는 플렉스 아이템의 크기를 유연하게 조정할 수 있다는 점이지만, 때때로 이 유연함을 없애야 할 때가 있습니다.

플렉스 아이템에 flex-basis: auto, flex-grow: 0, flex-shrink: 0을 지정하면, 플렉스 아이템의 크기를 유연하지 않게 명시적으로 설정할 수도 있습니다.

flex-basis: auto, flex-grow: 0, flex-shrink: 0 설정 조합은
해당 플렉스 아이템의 "유연성을 완전히 제거하여, 남는 공간이 있어도 커지지 않고 공간이 부족해도 줄어들지 않으며, 오직 자신의 콘텐츠가 가진 원래 크기(auto)를 기본적으로 유지한다"라는 의미입니다.

HTML

<div class="container">
    <div class="item item-1">item-1</div>
    <div class="item item-2">item-2</div>
    <div class="item item-3">item-3</div>
</div>

CSS

.container {
    display: flex;
    flex-direction: row; /* 플렉스 아이템의 배치 방향이 '가로 축'이므로
                            플렉스 아이템의 주축 방향의 크기는 '너비'가 됨 */
    border: 4px dashed silver;
}  
.item { /* 플렉스 아이템 */
    border: 4px solid blue;
    background-color: yellow;
    /* 유연성을 제거하여 폭을 고정함 */
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
} 

/* 유연성을 제거한 플렉스 아이템이 주축 방향이 '가로 축'이면
   width 값을 너비의 고정 크기로 사용 */
.item-1 {
    width: 50px;
}
.item-2 {
    width: 100px;
}
.item-3 {
    width: 150px;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

코드 부연설명
유연하지 않은 (고정 크기의) 플렉스 아이템 크기에서 flex-basis: auto는 주축 방향이 '가로 축'이면 width 값을, '세로 축'이면 height 값을 지정할 경우 그 값이 고정 크기로 사용됩니다.

특정 플렉스 아이템만 너비를 자동으로 꽉 채우기

특정 플렉스 아이템의 크기는 플렉스 컨테이너의 크기와 상관없이 전체 너비 기준으로 남는 공간을 자동으로 꽉 채워야 할 때가 있습니다. 이때 나머지 플렉스 아이템은 유연하지 않고 너비가 100px로 고정된 크기를 가지고 있는 경우의 예제입니다.

CSS

.container {
    display: flex;
    flex-direction: row; /* 플렉스 아이템의 배치 방향이 '가로 축'이므로
                            플렉스 아이템의 주축 방향의 크기는 '너비'가 됨 */
    border: 4px dashed silver;
}  
.item { /* 플렉스 아이템 */
    border: 4px solid blue;
    background-color: yellow;
} 
.item-b { /* 플렉스 아이템의 너비를 자동으로 꽉 채우기 */
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}
.item-a, .item-c { /* 유연성을 제거하여 폭을 고정함 */
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    width: 100px;
}
/*
 * 일부 스타일 코드는 가독성을 위해 생략했습니다!
*/

.item-b의 flex-basis: auto, flex-grow: 1, flex-shrink: 1 설정 조합은 해당 플렉스 아이템이 "자신의 콘텐츠 크기(auto)를 기준으로 남는 공간이 있으면 공간을 가득 채우기 위해 크기를 키우고, 부족한 공간이 있으면 줄어들 수도 있는 유연한 상태"라는 의미입니다.
.item-a와 .item-c의 flex-basis: auto, flex-grow: 0, flex-shrink: 0 설정 조합은 해당 플렉스 아이템의 "유연성을 완전히 제거하여, 남는 공간이 있어도 커지지 않고 공간이 부족해도 줄어들지 않으며, 오직 자신의 콘텐츠가 가진 원래 크기(auto)를 기본적으로 유지한다"라는 의미입니다.
크기 유연성을 제거한 .item-a와 .item-c의 flex-basis: auto는 width: 100px이 고정 크기로 사용됩니다.

`flex`(`flex-basis`, `flex-grow`, `flex-shrink`를 한 번에 지정하는 단축 속성) 사용하기

flex는 플렉스 아이템의 크기를 결정하는 flex-basis, flex-grow, flex-shrink 속성을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

플렉스 아이템의 크기를 제어할 때는 각 속성을 따로 사용하는 것보다는
flex 단축 속성을 사용하여 유연한 크기 조정에 필요한 모든 구성 속성을 한 번에 제어하는 것이 좋습니다.
flex 단축 속성은 생략된 구성 속성의 값을 함께 재설정(reset)하므로, 예상하지 못한 크기 계산 결과를 줄이는 데 도움이 됩니다.

CSS

.item { /* 플렉스 아이템 */
    /* 플렉스 아이템의 너비를 자동으로 꽉 채우기 */
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

CSS

.item { /* 플렉스 아이템 */
    /* 플렉스 아이템의 너비를 자동으로 꽉 채우기 */
    flex: auto; /* flex-grow=1, flex-shrink=1, flex-basis=auto와 동일 */
}

브라우저 호환성

flexbox의 브라우저 호환성
Module	데스크탑 Chrome	데스크탑 Edge	데스크탑 Firefox	Safari
CSS Flexible Box Layout Module	29	12	28	9

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

flexbox에 대한 명세서 사양
명세서 사양
flexbox	CSS Flexible Box Layout Module Level 1 #flexibility

참고문헌

MDN - flex CSS property