Flexible box layout/Controlling flex item ratios

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

95/190

안녕하세요! 오늘 번역해 볼 MDN 공식 문서는 CSS Flexbox의 꽃이자, 실무에서 가장 많이 다루게 될 주축(Main Axis)을 따라 플렉스 아이템의 비율 조절하기 (Controlling ratios of flex items along the main axis) 입니다.

이전에는 요소들을 정렬하는 방법을 배웠다면, 이번에는 화면 크기가 늘어나거나 줄어들 때 아이템들이 공간을 어떻게 나눠 가질지(flex-grow), 혹은 공간이 부족할 때 누가 먼저 찌그러질지(flex-shrink)를 결정하는 방법을 배웁니다.
특히 "왜 flex: 1을 줬는데 아이템들의 크기가 똑같지 않지?" 라며 당황해 본 경험이 있으시다면, 이 문서가 그 의문을 완벽하게 해결해 줄 것입니다!

주축을 따라 플렉스 아이템의 비율 조절하기 (Controlling ratios of flex items along the main axis)

이 가이드에서는 주축(main axis)을 따라 플렉스 아이템의 크기와 유연성을 제어하는 세 가지 속성인 flex-grow, flex-shrink, 그리고 flex-basis에 대해 탐구합니다. 아이템이 늘어나고(growing) 줄어드는(shrinking) 과정과 함께 이 속성들이 어떻게 작동하는지를 완벽히 이해하는 것이야말로 CSS 플렉서블 박스 레이아웃 (CSS flexible box layout)을 마스터하는 핵심 열쇠입니다.

이 문서에서 다룰 내용 (In this article)

먼저 살펴보기 (A first look)
주축 작업 시 중요한 개념들 (Important concepts when working on the main axis)
flex-basis 속성 (The flex-basis property)
flex-grow 속성 (The flex-grow property)
flex-shrink 속성 (The flex-shrink property)
플렉스 아이템 크기 조정 마스터하기 (Mastering sizing of flex items)

먼저 살펴보기 (A first look)

이 세 가지 속성은 플렉스 아이템의 유연성에 있어 다음과 같은 측면을 제어합니다:

flex-grow: 양의 여유 공간(positive free space) 중 얼마만큼을 이 아이템이 가져갈 것인가?
flex-shrink: 음의 여유 공간(negative free space) 발생 시 이 아이템에서 얼마만큼의 공간을 덜어낼 것인가?
flex-basis: 늘어나거나 줄어들기 전, 이 아이템의 기본 크기는 얼마인가?

이 속성들은 대개 단축 속성인 flex를 사용하여 한 번에 표현됩니다. 아래의 코드는 flex-grow 속성을 2로, flex-shrink를 1로, 그리고 flex-basis를 auto로 설정합니다.

.item {
  flex: 2 1 auto;
}

주축 작업 시 중요한 개념들 (Important concepts when working on the main axis)

flex 속성들을 이해하려면, 아이템들이 늘어나거나 줄어들기 전에 가지는 자연적인 크기(natural size)를 아는 것이 도움이 됩니다. 추가로, 여유 공간(free space)이라는 개념을 이해하는 것도 중요합니다. 여유 공간이란 주축(main axis)의 전체 크기에서 모든 플렉스 아이템들의 자연적인 크기를 합친 값을 뺀 나머지 공간을 의미합니다.

플렉스 아이템의 크기 결정 (Flex item sizing)

플렉스 아이템들을 배치할 공간이 얼마나 남았는지 파악하려면, 브라우저는 아이템들이 처음 시작할 때 크기가 얼마나 되는지를 알아야 합니다. 그렇다면 절댓값 단위(px 등)를 사용하여 너비(width)나 높이(height)를 명시하지 않은 아이템의 크기는 어떻게 계산될까요?

CSS에서는 <length> 단위 대신 min-content와 max-content라는 키워드를 사용할 수 있습니다. 일반적으로 min-content는 요소 안에서 가장 긴 단어가 삐져나가지 않을 정도의 최소한의 크기를 말하며, max-content는 콘텐츠가 줄바꿈 없이 한 줄로 쭉 늘어섰을 때 필요한 최대한의 크기를 말합니다.

아래 예제는 서로 다른 텍스트 길이를 가진 두 개의 문단(paragraph) 요소를 보여줍니다. 첫 번째 문단은 너비가 min-content로 설정되어 있습니다. 텍스트가 줄바꿈(soft wrapping)할 수 있는 모든 기회를 활용하여, 내용이 박스를 벗어나지 않는 선에서 박스가 가능한 한 작아진 것을 볼 수 있습니다. 이것이 바로 이 텍스트의 min-content 크기입니다. 본질적으로, 텍스트 내에서 가장 긴 단어가 이 박스의 크기를 결정짓고 있습니다.

두 번째 문단은 max-content 값을 가지고 있으며 정반대로 작동합니다. 텍스트가 줄바꿈 기회를 전혀 잡지 않고 한 줄로 쭉 표시될 수 있도록 필요한 만큼 박스가 끝없이 늘어납니다. 만약 박스를 감싸고 있는 컨테이너가 너무 좁다면, 이 박스는 컨테이너 밖으로 넘쳐버릴(overflow) 것입니다.

<p class="min-content">
  I am sized with min-content and so I will take all of the soft-wrapping
  opportunities.
</p>
<p class="max-content">
  I am sized with max-content and so I will take none of the soft-wrapping
  opportunities.
</p>

.min-content {
  width: min-content;
  border: 2px dotted rgb(96 139 168);
}
.max-content {
  width: max-content;
  border: 2px dotted rgb(96 139 168);
}

이 기사의 뒷부분에서 flex-grow와 flex-shrink를 탐구할 때, 이 동작 방식과 min-content, max-content가 어떤 영향을 미치는지 꼭 기억해 두세요.

양의 여유 공간과 음의 여유 공간 (Positive and negative free space)

우리는 또한 양의 여유 공간(positive free space)과 음의 여유 공간(negative free space)의 개념을 이해해야 합니다.

플렉스 컨테이너가 플렉스 아이템들을 표시하는 데 필요한 크기보다 더 넓은 공간을 가지고 있을 때, 우리는 이를 양의 여유 공간(positive free space)을 가졌다고 말합니다. 예를 들어, flex-direction이 row로 설정된 너비 500px의 컨테이너 안에 너비 100px짜리 플렉스 아이템이 세 개 들어있다면, 이 컨테이너는 200px의 양의 여유 공간을 갖게 됩니다. 만약 컨테이너를 아이템들로 꽉 채우고 싶다면 이 양의 여유 공간을 아이템들에게 나누어 줄 수 있습니다.

Image showing space left over after items have been displayed.

플렉스 아이템들의 자연적인 크기 합계가 플렉스 컨테이너의 가용 공간보다 더 클 때, 플렉스 컨테이너는 음의 여유 공간(negative free space)을 갖게 됩니다. 만약 위의 너비 500px 컨테이너 예제에서 세 개의 아이템이 각각 100px이 아니라 200px의 너비를 갖는다면, 아이템들의 총 자연적인 너비는 600px이 되어 100px의 음의 여유 공간(즉, 부족한 공간)이 발생합니다. 아이템들이 컨테이너에 쏙 들어가게 하려면 이 부족한 100px만큼을 아이템들에서 깎아내거나(remove), 아이템들이 컨테이너 밖으로 넘치게(overflow) 둬야 합니다.

The items overflow the container

우리는 flex 단축 속성의 구성 요소들을 배우기 위해, 양의 여유 공간이 어떻게 '분배(distribution)'되고 음의 여유 공간이 어떻게 '제거(removal)'되는지 알아야 합니다.

다음 예제들에서는 flex-direction이 row로 설정되어 있으므로, 아이템의 크기는 너비(width)에 의해 결정됩니다. 우리는 모든 아이템의 총너비와 컨테이너의 너비를 비교하여 양/음의 여유 공간을 계산할 것입니다. 여러분은 flex-direction: column으로 설정하여 각 예제를 직접 테스트해 볼 수도 있습니다. 그러면 주축이 세로열(column)이 되므로, 양/음의 여유 공간을 계산할 때는 아이템들의 총높이와 컨테이너의 높이를 비교하게 됩니다.

`flex-basis` 속성 (The `flex-basis` property)

flex-basis 속성은 양의 여유 공간이나 음의 여유 공간이 분배되기 전, 플렉스 아이템의 초기 크기를 지정합니다. 이 속성의 초깃값(기본값)은 auto입니다. 이 속성은 width와 height 속성과 동일한 값들을 사용할 수 있으며, content라는 키워드도 사용할 수 있습니다.

flex-basis가 auto로 설정되어 있을 때, 만약 아이템의 주축(main size)에 <length-percentage> 크기가 명시적으로 설정되어 있다면 그 값이 아이템의 초기 크기가 됩니다. 예를 들어 아이템에 width: 200px이 설정되어 있다면 200px이 이 아이템의 flex-basis가 됩니다. 퍼센트(%) 값은 플렉스 컨테이너의 내부(inner) 주축 크기에 상대적으로 계산됩니다. width: 50%가 설정되었다면 flex-basis는 부모 콘텐츠 박스 너비의 절반이 됩니다.
만약 명시된 크기가 없다면(즉, 아이템이 auto-sized인 경우), auto는 콘텐츠 자체의 크기(앞서 설명한 min- 및 max-content 크기 결정 부분 참조)로 귀결됩니다. 즉, 이 경우 flex-basis는 아이템의 max-content 크기와 같아집니다.

다음 예제는 flex-grow와 flex-shrink가 모두 0으로 설정된, 유연성 없는(inflexible) 세 개의 아이템을 포함하고 있습니다. 첫 번째 아이템은 명시적인 너비인 150px을 가지고 있으므로 flex-basis가 150px이 됩니다. 반면 나머지 두 아이템은 너비가 설정되어 있지 않으므로 그들의 콘텐츠 너비, 즉 max-content 크기에 따라 크기가 정해집니다.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 0 0 auto;
}

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
}

.box :first-child {
  width: 150px;
}

💡 강사의 실무 팁!
flex-basis: auto 외에도 content라는 키워드를 사용할 수 있습니다. flex-basis: content로 설정하면 아이템에 명시적인 width가 설정되어 있더라도 이를 완전히 무시하고 오직 내부 콘텐츠(글자나 이미지)의 크기만을 기준으로 flex-basis를 산정합니다.

공간 분배 계산을 할 때 아이템이 가진 콘텐츠의 원래 크기(글자 수 등)를 완전히 무시하고 싶다면, flex-basis를 0으로 설정하고 0이 아닌 flex-grow 값을 주면 됩니다. 이 값이 어떻게 작동하는지 보기 전에 먼저 flex-grow에 대해 알아봅시다.

`flex-grow` 속성 (The `flex-grow` property)

flex-grow 속성은 플렉스 증가 계수(flex grow factor)를 지정합니다. 이 계수는 컨테이너에 양의 여유 공간(남는 공간)이 분배될 때, 특정 플렉스 아이템이 다른 아이템들에 비해 얼마나 더 많이 늘어날 것인지를 결정합니다.

모든 아이템이 동일한 flex-grow 계수를 가지고 있다면, 양의 여유 공간은 아이템들 사이에 똑같이 균등하게 분배됩니다. 이러한 시나리오를 위해 flex-grow: 1을 설정하는 것이 일반적인 관행입니다. 하지만 비율이기 때문에 88, 100, 또는 1.2와 같이 어떤 값이든 사용할 수 있습니다. 컨테이너 안의 모든 플렉스 아이템의 계수가 동일하고 양의 여유 공간이 존재한다면, 그 남는 공간은 모두에게 동등하게 분배됩니다.

`flex-grow`와 `flex-basis` 결합하기 (Combining `flex-grow` and `flex-basis`)

flex-grow와 flex-basis가 어떻게 상호작용하는지에 대해서는 헷갈리기 쉽습니다. 길이가 서로 다른 텍스트를 가진 세 개의 플렉스 아이템이 있고, 여기에 다음과 같은 flex 규칙이 적용되었다고 가정해 보겠습니다:

.class {
  flex: 1 1 auto;
}

이 경우, flex-basis 값은 auto이고 아이템들에는 고정된 너비가 설정되어 있지 않으므로 아이템들은 자동으로 크기가 정해집니다. 즉, 각 아이템의 max-content 크기가 flex-basis로 사용된다는 의미입니다. 아이템들을 쭉 배치하고 나면 플렉스 컨테이너에 약간의 양의 여유 공간이 남게 되는데, 이 공간은 아래 이미지에서 빗금 친 영역으로 표시되어 있습니다. 이 빗금 친 영역(양의 여유 공간)이 바로 세 개의 아이템 사이에서 그들의 flex-grow 계수에 따라 분배될 공간입니다.

Three items taking a bit more than half the width, with the rest of the width being hatched

우리는 지금 콘텐츠의 원래 크기와 동일한 flex-basis를 기준으로 작업하고 있습니다. 이것은 부모 컨테이너의 전체 너비에서 '아이템들이 원래 차지하는 너비의 합'을 뺀 나머지(분배 가능한 여유 공간)만이 세 아이템에게 똑같이 나뉘어 더해진다는 것을 의미합니다. 그 결과, 가장 큰 콘텐츠를 가진 아이템이 최종적으로도 가장 큰 크기를 유지하게 됩니다. 다른 아이템들과 똑같은 양의 '여유 공간'을 나눠 받았지만, 애초에 자신이 가지고 있던 시작 크기(flex-basis)가 가장 컸기 때문이죠.

The hatched area was divided into thirds, with each item getting a single portion appended.

💡 강사의 핵심 포인트!
"왜 아이템 3개에 전부 flex: 1을 줬는데 크기가 다 다를까요?" 라는 프론트엔드 개발자들의 오랜 질문에 대한 해답이 바로 여기 있습니다! flex: 1 1 auto 상태에서는 콘텐츠 길이의 차이가 최종 크기에 반영됩니다.

원래 요소들이 품고 있는 콘텐츠의 크기가 다르더라도 세 아이템의 최종 크기를 완벽하게 똑같이 맞추고 싶다면, flex-basis 구성 요소를 0으로 설정해야 합니다.

.class {
  flex: 1 1 0; /* 단축 속성으로 그냥 flex: 1 이라고 써도 똑같이 동작합니다! */
}

여기서는 공간 분배 계산을 할 때, 각 아이템이 가진 원래 크기를 0으로 취급하겠다고 설정한 것입니다. 즉, 컨테이너의 전체 공간 100%가 분배 가능한 여유 공간이 되어버립니다. 모든 아이템이 동일한 flex-grow 계수를 가지고 있으므로, 각각 전체 공간을 똑같은 비율로 나누어 갖게 됩니다. 그 결과, 완벽하게 같은 너비를 가진 세 개의 플렉스 아이템이 탄생합니다.

아래 라이브 예제에서 3번째 아이템의 텍스트가 더 길지만 최종 크기는 동일한 것을 볼 수 있습니다.

<div class="box">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three has more content</div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 1 1 0; /* 모든 아이템이 0부터 시작하여 동일한 비율로 늘어납니다. */
}

.box {
  width: 400px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
}

아이템들에 서로 다른 flex-grow 계수 부여하기 (Giving items different flex-grow factors)

flex-grow와 flex-basis를 함께 사용하면, 서로 다른 flex-grow 계수를 설정하여 개별 아이템의 크기를 정교하게 제어할 수 있습니다. flex-basis를 0으로 유지하여 전체 공간이 분배되도록 한 상태에서, 각 아이템에 서로 다른 flex-grow 계수를 할당해 보세요.

아래 예제에서 우리는 처음 두 개의 아이템에는 flex-grow 계수로 1을 사용하고, 세 번째 아이템에는 그 두 배인 2를 사용합니다. 모든 아이템의 flex-basis가 0으로 설정된 상태에서, 여유 공간은 다음과 같이 분배됩니다:

모든 형제 플렉스 아이템의 flex-grow 계수 값들을 전부 합산합니다 (이 경우 총합은 4입니다).
플렉스 컨테이너의 양의 여유 공간(전체 너비)을 이 총합(4)으로 나눕니다.
계산된 여유 공간 1조각을 각 아이템의 계수 값에 따라 나눠줍니다. 첫 번째 아이템은 1조각, 두 번째도 1조각, 세 번째는 2조각을 받습니다. 이는 세 번째 아이템이 첫 번째나 두 번째 아이템보다 정확히 두 배 더 큰 크기를 갖게 된다는 뜻입니다.

.one {
  flex: 1 1 0;
}

.two {
  flex: 1 1 0;
}

.three {
  flex: 2 1 0;
}

이 계수는 무조건 정수가 아니어도 됩니다. 0.25, 0.25, 0.5와 같은 소수를 입력해도 비율만 맞다면 위 예제와 완벽하게 동일한 결과가 나옵니다.

`flex-shrink` 속성 (The `flex-shrink` property)

flex-shrink 속성은 플렉스 축소 계수(flex shrink factor)를 지정합니다. 이는 부모 컨테이너에 공간이 모자랄 때(음의 여유 공간이 생길 때) 해당 플렉스 아이템이 다른 형제 아이템들에 비해 얼마나 더 많이 쪼그라들(shrink) 것인지를 결정합니다.

이 속성은 플렉스 아이템들의 flex-basis 값의 합이 플렉스 컨테이너의 크기보다 커서 원래대로라면 컨테이너 밖으로 넘쳐버리는(overflow) 상황을 처리합니다. 아이템의 flex-shrink 값이 0보다 큰 양수이기만 하면, 그 아이템은 컨테이너를 넘치지 않도록 스스로 줄어들게 됩니다.

flex-grow가 늘어날 수 있는 아이템들에게 여유 공간을 더해주는 용도라면, flex-shrink는 아이템들이 컨테이너를 넘치지 않게 쏙 들어가도록 공간을 깎아내는(remove) 용도입니다.

아래 예제에는 너비가 500px인 컨테이너 안에 너비가 200px인 플렉스 아이템 세 개가 들어있습니다. flex-shrink가 0으로 설정되어 있어 아이템들이 줄어드는 것이 허락되지 않았기 때문에, 결과적으로 아이템들이 부모 컨테이너 밖으로 삐져나오게 됩니다.

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three has more content</div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 0 0 auto; /* 수축 불가! */
  width: 200px; /* 200 * 3 = 600px. 부모보다 100px이 큽니다. */
}

.box {
  width: 500px;
  border: 2px dotted rgb(96 139 168);
  display: flex;
}

이제 flex-shrink 값을 1로 바꿔보세요 (예: flex: 0 1 auto). 각 아이템은 삐져나온 총 너비인 100px을 균등하게 분담하여 줄어들게 되며, 결국 컨테이너 안에 딱 맞게 들어갑니다.

`flex-shrink`와 `flex-basis` 결합하기 (Combining `flex-shrink` and `flex-basis`)

flex-shrink가 flex-grow와 방향만 반대일 뿐, 아이템을 늘리는 대신 줄이는 방식으로 완벽하게 똑같이 작동한다고 생각할 수 있습니다. 하지만 이 둘 사이에는 주목해야 할 중요한 차이점이 있습니다.

앞서 배운 플렉스 기본 크기(flex base size) 개념은 부족한 공간(음의 공간)이 아이템들에 걸쳐 어떻게 분배되는지에 영향을 미칩니다. 부족한 공간을 분배할 때, 플렉스 축소 계수(flex shrink factor)는 플렉스 기본 크기(flex-basis)와 곱해져서 계산됩니다. 이렇게 하면 아이템이 '줄어들 수 있는 능력'에 비례하여 깎아낼 공간을 배분하게 됩니다.
즉, 원래 크기가 아주 작은 아이템이 큰 아이템보다 먼저 0으로 쪼그라들어서 화면에서 사라져버리는 불상사를 막아줍니다.

또한 아이템들은 아무리 쪼그라들어도 자신들의 min-content 크기(단어가 깨지지 않는 최소한의 크기)보다 더 작게 줄어들지는 않습니다.

아래 예제는 이 min-content가 바닥(하한선) 역할을 하는 현상을 보여줍니다. 만약 뷰포트나 컨테이너의 크기를 확 줄여보시면 처음 두 아이템은 글자가 쪼그라들면서 줄바꿈이 일어나지만, 절대로 가장 긴 단어 길이(min-content)보다는 작아지지 않습니다. 컨테이너가 아주 좁아지면 결국 마지막 아이템(콘텐츠가 제일 많은)만 집중적으로 희생하며 쪼그라들게 됩니다.

<div class="box">
  <div>Item One</div>
  <div>Item Two</div>
  <div>Item Three has more content and so has a larger size</div>
</div>

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  flex: 1 1 auto;
}

.box {
  border: 2px dotted rgb(96 139 168);
  width: 500px;
  display: flex;
}

실무에서 이러한 축소 방식(shrinking behavior)은 매우 합리적인 결과를 제공합니다. 이는 콘텐츠가 눈앞에서 완전히 사라져버리거나 최소 크기보다 더 심하게 찌그러져 텍스트가 읽히지 않게 되는 현상을 막아주기 때문입니다.

아이템들에 서로 다른 flex-shrink 계수 부여하기 (Giving items different flex-shrink factors)

flex-grow와 마찬가지로 플렉스 아이템들에 서로 다른 flex-shrink 계수를 부여할 수도 있습니다. 예를 들어 특정 아이템이 다른 형제들보다 더 빨리 줄어들게 하거나, 아예 줄어들지 않게 방어하고 싶을 때( flex-shrink: 0 ) 이 방법을 사용할 수 있습니다.

아래 예제에서 첫 번째 아이템의 flex-shrink 계수는 1, 두 번째 아이템은 0 (절대 줄어들지 않음), 세 번째 아이템은 4로 설정되어 총합은 5가 됩니다. 따라서 세 번째 아이템은 부족한 공간이 생겼을 때 첫 번째 아이템보다 약 4배 더 빠르게 쪼그라듭니다. 하지만 이 역시 min-content 너비 밑으로는 절대 줄어들지 않습니다.

.one {
  flex: 1 1 auto;
}

.two {
  flex: 1 0 auto; /* 수축 방어막을 쳤습니다. 남들이 다 쪼그라들어도 이 아이템은 버팁니다. */
}

.three {
  flex: 2 4 auto; /* 공간이 부족하면 남들보다 4배 빠른 속도로 희생합니다. */
}

플렉스 아이템 크기 조정 마스터하기 (Mastering sizing of flex items)

플렉스 아이템의 크기가 어떻게 정해지는지 완벽히 이해하려면, 이 가이드에서 논의했던 다음 요소들을 순서대로 고려해야 합니다:

1. 아이템의 기본 크기(base size)는 어떻게 결정되는가?

flex-basis가 auto로 설정되어 있고, 아이템에 width가 설정되어 있나요? 그렇다면 크기는 그 width를 기반으로 합니다.
flex-basis가 auto로 설정되어 있는데, 아이템에 width가 없나요? 그렇다면 크기는 아이템이 품고 있는 콘텐츠의 크기를 기반으로 합니다.
flex-basis가 0이 아닌 특정 길이나 퍼센트인가요? 그렇다면 그것이 바로 아이템의 기본 크기가 됩니다 (단, 아무리 작아도 min-content 크기보다는 작아지지 않습니다).
flex-basis가 0으로 설정되어 있나요? 그렇다면 아이템 자체의 크기는 공간 분배 계산에서 완전히 무시됩니다. (모든 남는 공간이 100% 비율대로 분배됩니다).

2. 가용 공간(여유 공간)이 있는가?

아이템들은 양의 여유 공간(남는 공간)이 있을 때만 자라날(grow) 수 있고, 음의 여유 공간(부족한 공간)이 있을 때만 쪼그라듭니다(shrink).

모든 아이템의 너비(또는 세로열일 땐 높이)를 다 더한 값이 컨테이너의 전체 너비보다 작은가요? 그렇다면 양의 여유 공간이 있으므로 flex-grow가 나설 차례입니다.
모든 아이템의 너비를 다 더한 값이 컨테이너의 전체 너비보다 큰가요? 그렇다면 음의 여유 공간이 생기므로 flex-shrink가 나설 차례입니다.

3. 여백을 분배하는 또 다른 방법은 무엇인가?

만약 아이템 자체를 뚱뚱하게 늘려서 빈 공간을 채우고 싶지 않다면, 플렉스 컨테이너에서 아이템 정렬하기 가이드에서 배웠던 정렬 속성들을 사용해 아이템 사이사이에 남는 공간을 예쁘게 분배할 수 있습니다. justify-content 속성은 아이템 사이나 주변에 공간을 뿌려주는 역할을 하죠. 또는 플렉스 아이템에 margin: auto를 부여해서 남는 공간을 한쪽으로 쭉 밀어버리며 간격을 만들 수도 있습니다.

이 모든 플렉스 속성들을 조합하면, 상상할 수 있는 거의 모든 레이아웃 작업을 해결할 수 있습니다. 물론 처음에는 직접 이것저것 수치를 바꿔가며 실험해 보는 시간이 조금 필요하겠지만요!

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요?

기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 MDN 기여자들에 의해 2025년 11월 7일에 마지막으로 수정되었습니다 (MDN contributors).

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Flexible box layout/Ordering flex items

다음 포스트

Flexible box layout/Controlling flex item ratios

mdn 학습 번역 - CSS

주축을 따라 플렉스 아이템의 비율 조절하기 (Controlling ratios of flex items along the main axis)

이 문서에서 다룰 내용 (In this article)

먼저 살펴보기 (A first look)

주축 작업 시 중요한 개념들 (Important concepts when working on the main axis)

플렉스 아이템의 크기 결정 (Flex item sizing)

양의 여유 공간과 음의 여유 공간 (Positive and negative free space)

`flex-basis` 속성 (The `flex-basis` property)

`flex-grow` 속성 (The `flex-grow` property)

`flex-grow`와 `flex-basis` 결합하기 (Combining `flex-grow` and `flex-basis`)

아이템들에 서로 다른 flex-grow 계수 부여하기 (Giving items different flex-grow factors)

`flex-shrink` 속성 (The `flex-shrink` property)

`flex-shrink`와 `flex-basis` 결합하기 (Combining `flex-shrink` and `flex-basis`)

아이템들에 서로 다른 flex-shrink 계수 부여하기 (Giving items different flex-shrink factors)

플렉스 아이템 크기 조정 마스터하기 (Mastering sizing of flex items)

1. 아이템의 기본 크기(base size)는 어떻게 결정되는가?

2. 가용 공간(여유 공간)이 있는가?

3. 여백을 분배하는 또 다른 방법은 무엇인가?

MDN 개선에 참여하기 (Help improve MDN)

Flexible box layout/Ordering flex items

Flexible box layout/Wrapping flex items

0개의 댓글

Flexible box layout/Controlling flex item ratios

mdn 학습 번역 - CSS

주축을 따라 플렉스 아이템의 비율 조절하기 (Controlling ratios of flex items along the main axis)

이 문서에서 다룰 내용 (In this article)

먼저 살펴보기 (A first look)

주축 작업 시 중요한 개념들 (Important concepts when working on the main axis)

플렉스 아이템의 크기 결정 (Flex item sizing)

양의 여유 공간과 음의 여유 공간 (Positive and negative free space)

flex-basis 속성 (The flex-basis property)

flex-grow 속성 (The flex-grow property)

flex-grow와 flex-basis 결합하기 (Combining flex-grow and flex-basis)

아이템들에 서로 다른 flex-grow 계수 부여하기 (Giving items different flex-grow factors)

flex-shrink 속성 (The flex-shrink property)

flex-shrink와 flex-basis 결합하기 (Combining flex-shrink and flex-basis)

아이템들에 서로 다른 flex-shrink 계수 부여하기 (Giving items different flex-shrink factors)

플렉스 아이템 크기 조정 마스터하기 (Mastering sizing of flex items)

1. 아이템의 기본 크기(base size)는 어떻게 결정되는가?

2. 가용 공간(여유 공간)이 있는가?

3. 여백을 분배하는 또 다른 방법은 무엇인가?

MDN 개선에 참여하기 (Help improve MDN)

Flexible box layout/Ordering flex items

Flexible box layout/Wrapping flex items

0개의 댓글

`flex-basis` 속성 (The `flex-basis` property)

`flex-grow` 속성 (The `flex-grow` property)

`flex-grow`와 `flex-basis` 결합하기 (Combining `flex-grow` and `flex-basis`)

`flex-shrink` 속성 (The `flex-shrink` property)

`flex-shrink`와 `flex-basis` 결합하기 (Combining `flex-shrink` and `flex-basis`)