CSS Academy · 강의

Flex Grow, Shrink와 Basis

flex 단축형을 사용해 flex 항목의 확대·축소 방식과 기본 크기를 제어합니다.

Flex Grow, Shrink와 Basis은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

flex 단축 속성

플렉스 항목에 사용하는 flex 단축 속성은 flex-grow, flex-shrink, flex-basis라는 세 가지 값을 설정합니다.

<div style="display:flex; gap:8px">
    <div class="item">flex: 1 1 auto</div>
    <div style="width:80px">Fixed 80px</div>
  </div>

flex-basis

flex-basis는 플렉스 항목이 늘어나거나 줄어들기 전의 초기 크기를 설정합니다. 행 방향에서는 width를 재정의합니다. auto는 항목의 너비 또는 콘텐츠 크기를 사용합니다.

<div style="display:flex; gap:8px">
    <div class="sidebar">Sidebar (250px basis)</div>
    <div class="main">Main (auto basis)</div>
  </div>

flex-grow

flex-grow는 여유 공간이 있을 때 형제 항목에 비해 항목이 얼마나 늘어날지 결정합니다. 값이 0이면 늘어나지 않습니다. 값이 클수록 비례하여 더 많은 공간을 차지합니다.

<div style="display:flex; gap:8px">
    <div class="main">Main (grow:2)</div>
    <div class="aside">Aside (grow:1)</div>
    <div class="fixed">Fixed (grow:0)</div>
  </div>

flex-grow 예시

컨테이너에 300px의 여유 공간이 있고 두 항목의 flex-grow 값이 각각 1과 2라면 첫 번째 항목은 100px를 추가로 받고 두 번째 항목은 200px를 추가로 받습니다(1:2 비율).

flex-shrink

flex-shrink는 공간이 부족할 때 항목이 얼마나 줄어들지 제어합니다. 기본값은 1이므로 모든 항목이 동일하게 줄어듭니다. 0으로 설정하면 줄어들지 않습니다.

<div style="display:flex; gap:8px">
    <div class="logo">Logo</div>
    <div class="search">Search input takes remaining space</div>
  </div>

자주 사용하는 flex 단축 속성 값

다음과 같은 일반적인 패턴을 기억해 두십시오:

flex: 1 = 동일하게 늘어나고 줄어들며 basis는 0%입니다
flex: auto = flex: 1 1 auto입니다
flex: none = flex: 0 0 auto이며 크기가 고정됩니다
flex: 0 0 200px = 200px로 고정되며 늘어나거나 줄어들지 않습니다

flex: 1 — 동일하게 분배하기

모든 자식 요소에 flex: 1을 설정하면 사용 가능한 공간이 동일하게 나뉩니다. basis가 0%가 되므로 항목은 0에서 시작하여 비례적으로 공간을 나눠 가집니다.

<div class="equal-columns" style="display:flex; gap:8px">
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </div>

flex-basis와 width 비교

flex-basis는 주축 방향에서 width보다 우선합니다. 둘 다 설정하면 flex-basis가 적용됩니다. 단, flex-basis가 auto이면 width를 따릅니다.

고유 크기와 외부 지정 크기

flex-basis: 0(flex: 1과 같은 경우)이면 항목은 0에서 시작하여 비례적으로 늘어납니다. 즉, 진정한 비례 분배가 이루어집니다. flex-basis: auto이면 항목은 콘텐츠의 자연스러운 크기에서 시작한 후 늘어납니다.

고정·유연·고정 구성 패턴

고정된 사이드바, 유연한 본문, 고정된 사이드바로 구성된 대표적인 레이아웃입니다:

<div class="layout">
    <div class="left-sidebar">Left</div>
    <div class="main-content">Main</div>
    <div class="right-sidebar">Right</div>
  </div>

flex에서 min-width와 max-width 사용하기

flex-grow와 함께 min-width와 max-width를 사용하여 크기가 늘어나는 한도를 제어합니다:

<div style="display:flex; gap:8px">
    <div class="card">Responsive Card</div>
  </div>

빠른 확인

항목에 flex: 0 0 200px가 설정되어 있습니다. 이것은 무엇을 의미합니까?

정리

flex-grow는 추가 공간을 비례하여 분배합니다. flex-shrink는 항목이 얼마나 압축될지 제어합니다. flex-basis는 시작 크기를 설정합니다. 단축 속성인 flex: 1은 공간을 동일하게 분배합니다. 같은 컨테이너에서 크기가 고정된 항목에는 flex: 0 0 Xpx를 사용하고 유연한 항목에는 flex: 1을 사용합니다.

자주 묻는 질문

“Flex Grow, Shrink와 Basis” 강의는 무료인가요?

네 — “Flex Grow, Shrink와 Basis” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Flex Grow, Shrink와 Basis”에서 뭘 배우나요?

flex 단축형을 사용해 flex 항목의 확대·축소 방식과 기본 크기를 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“Flex Grow, Shrink와 Basis” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기