[2026] CSS Flexbox 완벽 가이드 — 레이아웃 알고리즘·flex-shrink·실무 패턴

· 43분 읽기 · 수정 고급 튜토리얼
[2026] CSS Flexbox 완벽 가이드 — 레이아웃 알고리즘·flex-shrink·실무 패턴

이 글의 핵심

Flexbox 기본부터 CSS Flexbox Level 1 스펙 관점의 가용 공간·수축(flex-shrink) 계산, flex-basis와 width 관계, 프로덕션 패턴까지 한 번에 정리합니다.

들어가며

”레이아웃의 혁명, Flexbox”

Flexbox는 CSS의 1차원 레이아웃 모듈로, 가로 또는 세로 한 방향으로 자식 요소를 느낌 있게 정렬할 수 있습니다. 속성 사전·예제에 더해, 아래 「Flexbox 심화: 레이아웃 알고리즘·스펙 관점 이해」 절에서는 가용 공간 분배, flex-basis와 width의 역할, flex-shrink 가중 수축, 컨테이너·아이템 관계, 프로덕션 패턴을 스펙 수준에서 짚습니다. 비유(유연한 선반): 컨테이너는 길이가 늘어나는 유연한 선반이고, 아이템은 그 위에 놓인 물건이라고 보시면 됩니다. justify-content는 주 방향으로 물건을 어떻게 퍼놓을지, align-items는 선반 깊이(교차축) 방향으로 맞출지를 조절합니다. 전통적인 방법의 문제:

/* float 사용 (구식) */
.item {
    float: left;
    width: 33.33%;
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Flexbox로 해결:

/* 간단하고 직관적 */
.container {
    /* display: flex - Flexbox 레이아웃 활성화 */
    /* 이 한 줄로 자식 요소들이 flex item이 됨 */
    display: flex;
    
    /* gap - 아이템 사이의 간격 설정 */
    /* margin 없이도 간격 조절 가능 */
    gap: 20px;
}
.item {
    /* flex: 1 - 남은 공간을 균등하게 분배 */
    /* flex-grow: 1, flex-shrink: 1, flex-basis: 0의 축약형 */
    /* 모든 아이템이 flex: 1이면 같은 크기로 나눠 가짐 */
    flex: 1;
}

코드 설명:

  • display: flex: 부모 요소를 flex container로 만듦
  • gap: 20px: 아이템 사이 간격 (margin보다 편리)
  • flex: 1: 각 아이템이 남은 공간을 균등하게 차지 Flexbox의 장점:
  • ✅ 간단한 문법: 복잡한 레이아웃을 몇 줄로 구현
  • ✅ 반응형: 화면 크기에 자동 대응
  • ✅ 정렬: 수평/수직 정렬이 쉬움
  • ✅ 순서 제어: HTML 순서와 무관하게 배치
  • ✅ 공간 분배: 남은 공간을 자동 분배

실전 경험에서 배운 교훈

이 기술을 실무 프로젝트에 처음 도입했을 때, 공식 문서만으로는 알 수 없었던 많은 함정들이 있었습니다. 특히 프로덕션 환경에서 발생하는 엣지 케이스들은 로컬 개발 환경에서는 재현조차 되지 않았죠.

가장 어려웠던 점은 성능 최적화였습니다. 처음엔 “동작만 하면 되겠지”라고 생각했지만, 실제 사용자 트래픽이 몰리면서 병목 지점들이 하나씩 드러났습니다. 특히 데이터베이스 쿼리 최적화, 캐싱 전략, 에러 핸들링 구조 등은 여러 번의 장애를 겪으면서 개선해 나갔습니다.

이 글에서는 그런 시행착오를 통해 얻은 실전 노하우와, “이렇게 하면 안 된다”는 교훈들을 함께 정리했습니다. 특히 트러블슈팅 섹션은 실제 장애 대응 경험을 바탕으로 작성했으니, 비슷한 문제를 마주했을 때 참고하시면 도움이 될 것입니다.

1. Flexbox 기본 개념

컨테이너와 아이템

Flexbox는 컨테이너(Container)와 아이템(Item) 두 가지 요소로 구성됩니다.

<div class="container">  <!-- Flex Container -->
    <div class="item">1</div>  <!-- Flex Item -->
    <div class="item">2</div>
    <div class="item">3</div>
</div>
.container {
    display: flex;  /* Flexbox 활성화 */
}

주축(Main Axis)과 교차축(Cross Axis)

Flexbox는 두 개의 축을 기준으로 동작합니다:

flex-direction: row (기본값)
┌─────────────────────────────────┐
│  Main Axis (주축) →             │
│  ┌───┐ ┌───┐ ┌───┐              │
│  │ 1 │ │ 2 │ │ 3 │  ↑ Cross    │
│  └───┘ └───┘ └───┘  ↓ Axis     │
│                      (교차축)    │
└─────────────────────────────────┘
flex-direction: column
┌─────────────────────┐
│  ← Cross Axis       │
│  ┌───────────┐      │
│  │     1     │  ↓   │
│  └───────────┘      │
│  ┌───────────┐  Main│
│  │     2     │  Axis│
│  └───────────┘  (주축)│
│  ┌───────────┐  ↓   │
│  │     3     │      │
│  └───────────┘      │
└─────────────────────┘

2. Flex Direction (방향)

방향 설정

.container {
    display: flex;
    
    /* 가로 (기본값) */
    flex-direction: row;
    
    /* 가로 역방향 */
    flex-direction: row-reverse;
    
    /* 세로 */
    flex-direction: column;
    
    /* 세로 역방향 */
    flex-direction: column-reverse;
}

실전 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <style>
        .demo {
            display: flex;
            gap: 10px;
            padding: 20px;
            border: 2px solid #ddd;
            margin-bottom: 20px;
        }
        
        .item {
            background: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
            min-width: 80px;
        }
        
        .row { flex-direction: row; }
        .row-reverse { flex-direction: row-reverse; }
        .column { flex-direction: column; }
        .column-reverse { flex-direction: column-reverse; }
    </style>
</head>
<body>
    <h3>row (기본값)</h3>
    <div class="demo row">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>row-reverse</h3>
    <div class="demo row-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    
    <h3>column</h3>
    <div class="demo column">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

3. Justify Content (주축 정렬)

정렬 옵션

주축(Main Axis) 방향의 정렬을 제어합니다.

.container {
    display: flex;
    
    /* 시작점 정렬 (기본값) */
    justify-content: flex-start;
    
    /* 끝점 정렬 */
    justify-content: flex-end;
    
    /* 중앙 정렬 */
    justify-content: center;
    
    /* 양끝 정렬 (사이 균등) */
    justify-content: space-between;
    
    /* 주위 균등 */
    justify-content: space-around;
    
    /* 완전 균등 */
    justify-content: space-evenly;
}

시각적 비교

flex-start (기본값)
[1][2][3]           
flex-end
           [1][2][3]
center
      [1][2][3]     
space-between
[1]      [2]      [3]
space-around
  [1]    [2]    [3]  
space-evenly
   [1]   [2]   [3]

실전 예제

<style>
    .justify-demo {
        display: flex;
        gap: 10px;
        padding: 20px;
        border: 2px solid #ddd;
        margin-bottom: 20px;
        min-height: 100px;
    }
    
    .item {
        background: #e74c3c;
        color: white;
        padding: 20px;
        min-width: 80px;
        text-align: center;
    }
</style>
<h3>space-between (양끝 정렬)</h3>
<div class="justify-demo" style="justify-content: space-between;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
<h3>center (중앙 정렬)</h3>
<div class="justify-demo" style="justify-content: center;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

4. Align Items (교차축 정렬)

정렬 옵션

교차축(Cross Axis) 방향의 정렬을 제어합니다.

.container {
    display: flex;
    height: 200px;
    
    /* 늘림 (기본값) */
    align-items: stretch;
    
    /* 시작점 정렬 */
    align-items: flex-start;
    
    /* 끝점 정렬 */
    align-items: flex-end;
    
    /* 중앙 정렬 */
    align-items: center;
    
    /* 베이스라인 정렬 */
    align-items: baseline;
}

시각적 비교

stretch (기본값)
┌─────────────┐
│ ┌─┐ ┌─┐ ┌─┐ │
│ │1│ │2│ │3│ │
│ └─┘ └─┘ └─┘ │
└─────────────┘
flex-start
┌─────────────┐
│ ┌─┐ ┌─┐ ┌─┐ │
│ │1│ │2│ │3│ │
│ └─┘ └─┘ └─┘ │
│             │
└─────────────┘
center
┌─────────────┐
│             │
│ ┌─┐ ┌─┐ ┌─┐ │
│ │1│ │2│ │3│ │
│ └─┘ └─┘ └─┘ │
│             │
└─────────────┘
flex-end
┌─────────────┐
│             │
│ ┌─┐ ┌─┐ ┌─┐ │
│ │1│ │2│ │3│ │
│ └─┘ └─┘ └─┘ │
└─────────────┘

완벽한 중앙 정렬

.center-box {
    display: flex;
    justify-content: center;  /* 주축 중앙 */
    align-items: center;      /* 교차축 중앙 */
    min-height: 100vh;
}

5. Flex Wrap (줄바꿈)

줄바꿈 설정

.container {
    display: flex;
    
    /* 줄바꿈 안 함 (기본값) */
    flex-wrap: nowrap;
    
    /* 줄바꿈 */
    flex-wrap: wrap;
    
    /* 줄바꿈 역방향 */
    flex-wrap: wrap-reverse;
}

실전 예제: 반응형 카드

<style>
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
    }
    
    .card {
        /* 최소 250px, 남은 공간 균등 분배 */
        flex: 1 1 250px;
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .card h3 {
        margin: 0 0 10px 0;
        color: #2c3e50;
    }
    
    .card p {
        margin: 0;
        color: #7f8c8d;
    }
</style>
<div class="card-container">
    <div class="card">
        <h3>카드 1</h3>
        <p>내용...</p>
    </div>
    <div class="card">
        <h3>카드 2</h3>
        <p>내용...</p>
    </div>
    <div class="card">
        <h3>카드 3</h3>
        <p>내용...</p>
    </div>
    <div class="card">
        <h3>카드 4</h3>
        <p>내용...</p>
    </div>
</div>

동작 원리:

  • 화면이 넓으면: 4개가 한 줄에
  • 화면이 좁으면: 2개씩 또는 1개씩 줄바꿈

Align Content (여러 줄 정렬)

.container {
    display: flex;
    flex-wrap: wrap;
    height: 400px;
    
    /* 여러 줄의 정렬 */
    align-content: flex-start;
    align-content: flex-end;
    align-content: center;
    align-content: space-between;
    align-content: space-around;
    align-content: stretch;  /* 기본값 */
}

6. Flex Item 속성

Flex Grow (늘어남)

남은 공간을 어떻게 분배할지 결정합니다.

.item {
    /* 늘어나지 않음 (기본값) */
    flex-grow: 0;
    
    /* 남은 공간 채우기 */
    flex-grow: 1;
    
    /* 다른 아이템보다 2배 */
    flex-grow: 2;
}

예제:

<style>
    .grow-demo {
        display: flex;
        gap: 10px;
        padding: 20px;
        border: 2px solid #ddd;
    }
    
    .item-1 { flex-grow: 1; background: #3498db; }
    .item-2 { flex-grow: 2; background: #e74c3c; }
    .item-3 { flex-grow: 1; background: #2ecc71; }
    
    .item-1, .item-2, .item-3 {
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>
<div class="grow-demo">
    <div class="item-1">flex-grow: 1</div>
    <div class="item-2">flex-grow: 2 (2배 크기)</div>
    <div class="item-3">flex-grow: 1</div>
</div>

남은 공간 400px 분배:

  • 총 비율: 1 + 2 + 1 = 4
  • 아이템 1: 400px × (1/4) = 100px
  • 아이템 2: 400px × (2/4) = 200px
  • 아이템 3: 400px × (1/4) = 100px

Flex Shrink (줄어듦)

공간이 부족할 때 어떻게 줄어들지 결정합니다.

.item {
    /* 줄어들 수 있음 (기본값) */
    flex-shrink: 1;
    
    /* 줄어들지 않음 */
    flex-shrink: 0;
    
    /* 다른 아이템보다 2배 더 줄어듦 */
    flex-shrink: 2;
}

예제:

<style>
    .shrink-demo {
        display: flex;
        gap: 10px;
        padding: 20px;
        border: 2px solid #ddd;
        width: 400px;  /* 공간 부족 */
    }
    
    .item-fixed {
        flex-shrink: 0;  /* 고정 */
        width: 150px;
        background: #e74c3c;
    }
    
    .item-flexible {
        flex-shrink: 1;  /* 줄어듦 */
        width: 200px;
        background: #3498db;
    }
    
    .item-fixed, .item-flexible {
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>
<div class="shrink-demo">
    <div class="item-fixed">고정 (150px)</div>
    <div class="item-flexible">유연 (줄어듦)</div>
</div>

Flex Basis (기본 크기)

아이템의 초기 크기를 설정합니다.

.item {
    /* 자동 (width/height 사용) */
    flex-basis: auto;  /* 기본값 */
    
    /* 고정 크기 */
    flex-basis: 200px;
    
    /* 퍼센트 */
    flex-basis: 30%;
    
    /* 내용 크기 */
    flex-basis: content;
}

우선순위:

flex-basis > width > content

Flex 축약 속성

.item {
    /* flex: grow shrink basis */
    
    flex: 1;           /* 1 1 0% (균등 분배) */
    flex: auto;        /* 1 1 auto (내용 기준) */
    flex: none;        /* 0 0 auto (고정) */
    
    flex: 1 0 auto;    /* 커스텀 */
    flex: 0 0 200px;   /* 고정 200px */
}

자주 사용하는 패턴:

/* 균등 분배 */
.item { flex: 1; }
/* 고정 크기 */
.sidebar { flex: 0 0 250px; }
/* 내용 기준 + 늘어남 */
.main { flex: auto; }

Align Self (개별 정렬)

개별 아이템의 교차축 정렬을 변경합니다.

.item {
    /* 컨테이너의 align-items 무시 */
    align-self: flex-start;
    align-self: flex-end;
    align-self: center;
    align-self: stretch;
    align-self: baseline;
}

예제:

<style>
    .align-demo {
        display: flex;
        align-items: flex-start;  /* 기본: 위쪽 정렬 */
        height: 200px;
        gap: 10px;
        padding: 20px;
        border: 2px solid #ddd;
    }
    
    .item { background: #3498db; color: white; padding: 20px; }
    .item-center { align-self: center; background: #e74c3c; }
    .item-end { align-self: flex-end; background: #2ecc71; }
</style>
<div class="align-demo">
    <div class="item">flex-start</div>
    <div class="item-center">center</div>
    <div class="item-end">flex-end</div>
</div>

Order (순서 변경)

HTML 순서와 무관하게 아이템 순서를 변경합니다.

.item {
    /* 기본값: 0 */
    order: 0;
    
    order: -1;  /* 맨 앞 */
    order: 1;   /* 뒤로 */
    order: 999; /* 맨 뒤 */
}

예제:

<style>
    .order-demo {
        display: flex;
        gap: 10px;
        padding: 20px;
        border: 2px solid #ddd;
    }
    
    .item { background: #3498db; color: white; padding: 20px; }
    .item-1 { order: 3; }
    .item-2 { order: 1; }
    .item-3 { order: 2; }
</style>
<div class="order-demo">
    <div class="item item-1">HTML: 1 (order: 3)</div>
    <div class="item item-2">HTML: 2 (order: 1)</div>
    <div class="item item-3">HTML: 3 (order: 2)</div>
</div>
<!-- 화면 순서: 2 → 3 → 1 -->

Flexbox 심화: 레이아웃 알고리즘·스펙 관점 이해

문법만 알면 “왜 이 폭이 되지?” 같은 문제에 시간을 씁니다. 아래는 CSS Flexible Box Layout Module Level 1에서 정의하는 흐름을 실무자 관점으로 압축한 것입니다. 브라우저마다 부동소수·반올림으로 1px 차이는 날 수 있으나, 원인 분석과 DevTools 해석에는 충분합니다.

1. 레이아웃 알고리즘과 가용 공간(available space) 분배

Flex 컨테이너는 플렉스 포맷팅 컨텍스트(flex formatting context) 를 만듭니다. 직계 자식만 플렉스 아이템이 되며, 주축(main axis)과 교차축(cross axis)이 정해진 뒤 레이아웃이 진행됩니다.

스펙이 말하는 큰 단계를 한 줄로 요약하면 다음과 같습니다.

  1. 플렉스 라인(flex line) 을 만든다. flex-wrap에 따라 한 줄 또는 여러 줄이 됩니다.
  2. 각 아이템에 대해 가상의 주축 크기(hypothetical main size) 를 계산합니다. 이때 출발점이 되는 값이 flex-basis 와 min-* / max-* 클램프입니다.
  3. 한 줄 안에서 주축 방향 남거나 모자라는 공간(여유 공간, free space) 을 구합니다.
  4. 여유가 양수이면 flex-grow 비율로 나누고, 음수(넘침)이면 flex-shrink에 따라 수축합니다.
  5. 교차축 크기·정렬(align-items, align-self, align-content)을 확정합니다.

여기서 중요한 직관은 justify-content는 “여유 공간이 있을 때” 그 공간을 어떻게 배치할지 다루고, grow/shrink는 “여유 공간의 부호와 크기” 자체를 아이템 폭에 반영한다는 점입니다. 그래서 flex: 1로 꽉 채운 줄에서 justify-content를 바꿔도 차이가 없는 경우가 많습니다(이미 여유가 0이므로).

/* 주축 여유가 있을 때만 justify-content가 눈에 띔 */
.container {
  display: flex;
  width: 600px;
  gap: 0;
}
.item {
  flex: 0 0 100px; /* 늘리지도 줄이도 않음 → 남는 공간 발생 */
}

2. flex-basis와 width·height: 무엇이 “기준 크기”인가

주축이 가로(flex-direction: row) 일 때, 아이템의 주축 크기 결정에 가장 직접적으로 관여하는 것은 flex-basis입니다. flex-basis: auto(초깃값)일 때는, 명시된 width가 있으면 그것이 flex base size에 사용되는 경우가 일반적입니다. 반대로 flex-basis에 200px처럼 길이를 주면, 주축 기준점은 그 값이 되고 width와 동시에 쓰면 디버깅이 어려워집니다.

정리하면 다음과 같습니다.

  • flex-basis: “늘리거나 줄이기 전” 주축의 기준점. auto | content | <length> | <percentage> 등.
  • width / height: 일반 블록 레이아웃에서의 크기이지만, 플렉스 아이템에서는 주축이 가로일 때 width가 flex base size에 기여할 수 있습니다(flex-basis: auto 전제).
  • min-width / max-width: 최종적으로 클램프합니다. 특히 min-width: auto 는 기본적으로 콘텐츠 최소 크기를 지키려 해서, flex: 1인데도 텍스트가 줄바꿈되지 않는 전형적인 원인입니다.
/* 실무 권장: 한 축으로 의도를 몰아넣기 */
.sidebar {
  flex: 0 0 240px; /* basis+grow+shrink를 한 번에 */
  min-width: 0;    /* 필요 시 오버플로/말줄임 허용 */
}
.main {
  flex: 1 1 0%;    /* 남는 공간을 메인이 우선 소비 */
  min-width: 0;
}

퍼센트 flex-basis는 플렉스 컨테이너의 주축 가용 공간을 기준으로 해석됩니다(부모가 높이를 갖지 않은 column 레이아웃에서 예상과 다르게 보일 수 있으므로, 그때는 부모 높이·min-height를 먼저 확정합니다).

3. flex-shrink 계산: “얼마나 줄어들지”의 가중치

주축 한 줄에서 가상 주축 크기의 합 + gap이 컨테이너 안쪽 주축 길이를 초과하면, 브라우저는 넘치는 분(음의 여유 공간)을 아이템에 나누어 줍니다. 이때 각 아이템이 맡는 수축량은 단순히 flex-shrink 숫자만으로 결정되지 않고, 가상 주축 크기와 함께 가중됩니다.

직관적인 근사식은 다음과 같습니다(교육용; 실제는 스펙 절차에 따라 후속 보정이 있습니다).

  1. 넘침 (O = \sum \text{hypothetical main size} + \text{gap} - \text{container inner main size}) (양수면 수축 필요).
  2. 각 아이템 (i)에 대해 가중치 (w_i = (\text{flex-shrink}_i) \times (\text{가상 주축 크기}_i)).
  3. 아이템 (i)의 수축량은 대략 (O \times \frac{w_i}{\sum w_j}).

예시: 컨테이너 내부 주축 400px, gap: 0, 아이템 두 개의 가상 주축 크기가 각각 300px이라 합이 600px이면 (O = 200)px입니다. 둘 다 flex-shrink: 1이면 (w_1 = 1 \times 300), (w_2 = 1 \times 300)이므로 각각 약 100px씩 줄어 최종 200px이 됩니다. 한쪽만 flex-shrink: 2로 두면 더 큰 비중으로 줄어듭니다.

/* 아이콘·레이블 패턴: 아이콘은 안 줄이고 텍스트만 줄게 */
.row {
  display: flex;
  min-width: 0;
}
.icon {
  flex: 0 0 24px;
  flex-shrink: 0;
}
.label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

flex-shrink: 0은 “이 아이템은 수축 단계에서 최소한의 희생을 하지 않겠다”는 뜻에 가깝습니다. 다만 min-width·콘텐츠 최소 크기 때문에 여전히 레이아웃이 깨질 수 있으니, min-width: 0/overflow 전략과 함께 봐야 합니다.

4. 플렉스 컨테이너와 아이템의 관계

포함 관계만 보면 단순합니다. display: flex인 요소의 직계 자식만 플렉스 아이템입니다. 텍스트 노드가 직접 자식이면 익명 플렉스 아이템이 생깁니다. position: absolute인 자식은 플렉스 배치에서 빠지는 등, 예외도 함께 기억해야 합니다.

아이템 쪽에서 자주 막히는 지점은 다음입니다.

  • margin: auto: 주축·교차축에서 남는 공간을 margin이 흡수합니다. 중앙 정렬을 margin-left: auto; margin-right: auto로만 해결하려다 플렉스와 섞이면 예상과 다른 여백이 생깁니다.
  • align-self: 컨테이너의 align-items를 아이템 단위로 덮어씁니다.
  • order: 시각적 순서만 바꿀 뿐, 접근성·포커스 순서는 DOM 순서를 따릅니다. 탭 이동 순서가 중요하면 DOM을 조정하거나 신중히 설계합니다.
  • z-index: 플렉스 아이템은 특정 조건에서 쌓임 맥락이 달라질 수 있어, 겹침 UI에서 예상 밖의 렌더 순서가 나올 수 있습니다.
/* 세로 툴바: 위/아래는 고정, 가운데만 남는 공간 */
.column-toolbar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.column-toolbar .top {
  flex: 0 0 auto;
}
.column-toolbar .middle {
  flex: 1 1 auto;
  min-height: 0; /* 스크롤 영역에 필수인 경우가 많음 */
  overflow: auto;
}
.column-toolbar .bottom {
  flex: 0 0 auto;
}

5. 프로덕션 Flexbox 패턴(요약)

이미 본문 예제와 겹치지 않게, 운영 환경에서 반복되는 조합만 압축합니다.

  1. 가변 폭 + 말줄임 한 줄: flex: 1 1 auto + min-width: 0 + text-overflow: ellipsis. 테이블 셀 대체, 헤더 타이틀 바에 필수에 가깝습니다.
  2. 고정 폭 사이드바 + 유동 메인: .sidebar { flex: 0 0 240px; }, .main { flex: 1 1 auto; min-width: 0; }. flex-basis와 width를 이중으로 주지 않습니다.
  3. 바닥 고정 푸터(스티키 푸터): body { min-height: 100vh; display: flex; flex-direction: column; }, 메인에 flex: 1 1 auto. 콘텐츠가 짧아도 푸터가 아래에 붙습니다.
  4. 반응형 카드 열: flex-wrap: wrap + flex: 1 1 280px + gap. 마지막 줄만 간격이 어색하면 Grid의 auto-fill/minmax를 검토합니다.
  5. 스크롤 영역 분리: 부모가 flex이고 자식 스크롤이 필요하면, 스크롤되는 자식에 min-height: 0(또는 주축이 세로면 min-width: 0) 을 잊지 않습니다. 그렇지 않으면 flex 아이템의 기본 min-size: auto가 스크롤을 삼킵니다.

이 다섯 가지는 DevTools의 Flex 오버레이와 함께 보면, 주축 여유가 있는지·어디서 수축이 발생하는지가 한 번에 드러납니다.

7. Gap (간격)

간격 설정

.container {
    display: flex;
    
    /* 모든 방향 간격 */
    gap: 20px;
    
    /* 가로/세로 간격 */
    gap: 20px 10px;  /* row-gap column-gap */
    
    /* 개별 설정 */
    row-gap: 20px;
    column-gap: 10px;
}

gap vs margin 비교:

/* gap 사용 (권장) */
.container {
    display: flex;
    gap: 20px;  /* 간단 */
}
/* margin 사용 (구식) */
.container {
    display: flex;
}
.item {
    margin-right: 20px;
}
.item:last-child {
    margin-right: 0;  /* 마지막 제거 */
}

8. 실전 예제

예제 1: 네비게이션 바

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>네비게이션</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #2c3e50;
            padding: 1rem 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .logo {
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        .nav-menu a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        .nav-menu a:hover {
            color: #3498db;
        }
        
        .nav-actions {
            display: flex;
            gap: 1rem;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn-login {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .btn-signup {
            background: #3498db;
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">MyBrand</div>
        <ul class="nav-menu">
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">서비스</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
        <div class="nav-actions">
            <button class="btn btn-login">로그인</button>
            <button class="btn btn-signup">회원가입</button>
        </div>
    </nav>
</body>
</html>

예제 2: 카드 그리드

<style>
    .card-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding: 20px;
        background: #f8f9fa;
    }
    .card {
        /* 최소 300px, 최대 1fr */
        flex: 1 1 300px;
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }
    
    .card h3 {
        margin: 0 0 10px 0;
        color: #2c3e50;
    }
    
    .card p {
        margin: 0 0 15px 0;
        color: #7f8c8d;
        line-height: 1.6;
    }
    
    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #ecf0f1;
    }
    
    .price {
        font-size: 1.5rem;
        font-weight: bold;
        color: #3498db;
    }
    
    .btn-buy {
        padding: 8px 16px;
        background: #3498db;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
<div class="card-grid">
    <div class="card">
        <h3>상품 1</h3>
        <p>상품 설명이 들어갑니다.</p>
        <div class="card-footer">
            <span class="price">29,000원</span>
            <button class="btn-buy">구매</button>
        </div>
    </div>
    <div class="card">
        <h3>상품 2</h3>
        <p>상품 설명이 들어갑니다.</p>
        <div class="card-footer">
            <span class="price">39,000원</span>
            <button class="btn-buy">구매</button>
        </div>
    </div>
    <div class="card">
        <h3>상품 3</h3>
        <p>상품 설명이 들어갑니다.</p>
        <div class="card-footer">
            <span class="price">49,000원</span>
            <button class="btn-buy">구매</button>
        </div>
    </div>
    <div class="card">
        <h3>상품 4</h3>
        <p>상품 설명이 들어갑니다.</p>
        <div class="card-footer">
            <span class="price">59,000원</span>
            <button class="btn-buy">구매</button>
        </div>
    </div>
</div>

예제 3: 성배 레이아웃 (Holy Grail)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>성배 레이아웃</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        header {
            background: #2c3e50;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        
        .main-content {
            display: flex;
            flex: 1;  /* 남은 공간 채우기 */
        }
        
        .sidebar {
            flex: 0 0 250px;  /* 고정 250px */
            background: #ecf0f1;
            padding: 1rem;
        }
        
        main {
            flex: 1;  /* 남은 공간 */
            padding: 2rem;
        }
        
        footer {
            background: #34495e;
            color: white;
            padding: 1rem;
            text-align: center;
        }
        
        /* 반응형 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar {
                flex: 0 0 auto;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>헤더</h1>
    </header>
    
    <div class="main-content">
        <aside class="sidebar">
            <h3>사이드바</h3>
            <ul>
                <li>메뉴 1</li>
                <li>메뉴 2</li>
                <li>메뉴 3</li>
            </ul>
        </aside>
        
        <main>
            <h2>메인 콘텐츠</h2>
            <p>내용이 들어갑니다...</p>
        </main>
    </div>
    
    <footer>
        <p>&copy; 2026 MyWebsite</p>
    </footer>
</body>
</html>

예제 4: 폼 레이아웃

<style>
    .form-container {
        max-width: 600px;
        margin: 2rem auto;
        padding: 2rem;
        background: white;
        border-radius: 10px;
        box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    }
    
    .form-row {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .form-group {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    label {
        margin-bottom: 5px;
        font-weight: 500;
        color: #2c3e50;
    }
    
    input {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1rem;
    }
    
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 30px;
    }
    
    button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1rem;
    }
    
    .btn-cancel {
        background: #95a5a6;
        color: white;
    }
    
    .btn-submit {
        background: #3498db;
        color: white;
    }
</style>
<div class="form-container">
    <h2>회원가입</h2>
    
    <form>
        <div class="form-row">
            <div class="form-group">
                <label>이름</label>
                <input type="text" placeholder="홍길동">
            </div>
            <div class="form-group">
                <label>나이</label>
                <input type="number" placeholder="25">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label>이메일</label>
                <input type="email" placeholder="example@email.com">
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label>비밀번호</label>
                <input type="password" placeholder="********">
            </div>
        </div>
        
        <div class="form-actions">
            <button type="button" class="btn-cancel">취소</button>
            <button type="submit" class="btn-submit">가입</button>
        </div>
    </form>
</div>

9. 자주 발생하는 문제

1. 아이템이 줄어들지 않음

문제:

.item {
    width: 300px;  /* 고정 크기 */
}

해결:

.item {
    flex: 1 1 300px;  /* 줄어들 수 있음 */
    /* 또는 */
    min-width: 0;  /* 최소 크기 제한 해제 */
}

2. 텍스트 오버플로우

문제:

.item {
    flex: 1;
    /* 긴 텍스트가 넘침 */
}

해결:

.item {
    flex: 1;
    min-width: 0;  /* 중요! */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

3. 마지막 행 정렬

문제: justify-content: space-between에서 마지막 행이 이상하게 정렬됨

[1]      [2]      [3]
[4]              [5]  ← 문제!

해결 1: 빈 요소 추가

// 실행 예제
<style>
    .grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .item {
        flex: 1 1 200px;
    }
    
    /* 빈 요소 (최대 개수 - 1개) */
    .spacer {
        flex: 1 1 200px;
        height: 0;
    }
</style>
<div class="grid">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="spacer"></div>
    <div class="spacer"></div>
</div>

해결 2: CSS Grid 사용 (권장)

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

4. 높이가 같지 않음

문제: 카드 높이가 제각각 해결:

.container {
    display: flex;
    align-items: stretch;  /* 기본값, 높이 동일 */
}
.card {
    display: flex;
    flex-direction: column;
}
.card-content {
    flex: 1;  /* 남은 공간 채우기 */
}
.card-footer {
    /* 하단 고정 */
}

10. Flexbox vs Grid

언제 무엇을 사용할까?

기준FlexboxGrid
차원1차원 (가로 또는 세로)2차원 (가로 + 세로)
용도네비게이션, 버튼 그룹, 카드 나열페이지 레이아웃, 복잡한 그리드
정렬주축/교차축 정렬행/열 정렬
아이템 크기내용 기반 + flex명시적 크기 지정
브라우저 지원IE 10+ (부분)IE 10+ (부분)
선택 가이드:
✅ Flexbox 사용:
- 네비게이션 바
- 버튼 그룹
- 카드를 가로로 나열
- 중앙 정렬
- 폼 필드 정렬
✅ Grid 사용:
- 전체 페이지 레이아웃
- 갤러리 (행과 열)
- 복잡한 그리드
- 정확한 위치 지정

11. 실전 팁

1. 디버깅

.container {
    /* 경계선으로 확인 */
    border: 2px solid red;
}
.item {
    border: 1px solid blue;
}

Chrome DevTools:

  1. 요소 선택
  2. Styles 패널에서 Flexbox 아이콘 클릭
  3. 시각적으로 확인

2. 반응형 패턴

/* 모바일: 세로 */
.container {
    display: flex;
    flex-direction: column;
}
/* 태블릿 이상: 가로 */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

3. 자주 사용하는 패턴

/* 균등 분배 */
.item { flex: 1; }
/* 고정 사이드바 + 유연한 메인 */
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }
/* 중앙 정렬 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 양끝 정렬 */
.space-between {
    display: flex;
    justify-content: space-between;
}

4. 성능 최적화

/* ❌ 나쁨: 레이아웃 변경 */
.item:hover {
    width: 300px;  /* 리플로우 발생 */
}
/* ✅ 좋음: transform 사용 */
.item {
    transition: transform 0.3s;
}
.item:hover {
    transform: scale(1.05);  /* GPU 가속 */
}

12. 브라우저 지원

지원 현황

브라우저버전
Chrome29+
Firefox28+
Safari9+
Edge12+
IE11 (부분)

벤더 프리픽스 (구형 브라우저)

.container {
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -webkit-flex;     /* Safari 6.1+ */
    display: -ms-flexbox;      /* IE 10 */
    display: flex;             /* 표준 */
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

Autoprefixer 사용 (권장):

npm install autoprefixer

PostCSS 파이프라인에 Autoprefixer를 넣으면 구형 브라우저용 접두사가 빌드 시 자동으로 붙습니다.

13. 실전 한눈에: justify-content vs align-items

둘 다 “정렬”이지만 축이 다릅니다.

  • justify-content: 주축(main axis) 방향으로 아이템 뭉치를 배치합니다. flex-direction: row이면 가로, column이면 세로입니다.
  • align-items: 교차축(cross axis) 방향으로 각 줄(라인) 안에서 아이템을 정렬합니다. row일 때는 세로 정렬에 해당합니다.
flex-direction: row (주축 → 가로)
justify-content  →  [아이템들을 가로로 어디에 모을지]
align-items      →  [한 줄 안에서 세로로 어디에 붙일지]

헷갈릴 때: flex-direction을 바꾸면 주축·교차축이 바뀌므로, 같은 속성이라도 화면에서 담당하는 방향이 뒤집힙니다. 그때는 DevTools의 Flex 오버레이로 주축 화살표를 확인하는 것이 가장 빠릅니다.

14. flex-grow, flex-shrink, flex-basis 실무 해석

속성역할기억법
flex-basis남은 공간을 나누기 전 기준 크기 (auto면 width/콘텐츠 기준)“출발선”
flex-grow남는 공간을 비율로 나눠 가짐“늘어날 때”
flex-shrink공간이 부족할 때 줄어드는 비율“줄어들 때”
자주 쓰는 축약:
  • flex: 1 → 보통 flex: 1 1 0%에 가깝게 해석되어, 균등 분배에 자주 씁니다(브라우저 기본값과 조합 시 세부는 다를 수 있음).
  • flex: 0 0 200px → 200px 고정, 늘어나지도 줄지도 않음(사이드바 등).
  • flex: 1 1 300px → 기준 300px이지만 늘어나고 줄어들 수 있음(반응형 카드 열). 주의: flex-basis와 width가 동시에 있으면 상황에 따라 flex-basis가 우선되는 경우가 많습니다. “고정 폭”이면 flex: 0 0 200px처럼 한 번에 쓰는 편이 안전합니다.

15. 실전 레이아웃 보강: 반응형 네비 + 카드 그리드 요약

이미 8. 실전 예제에 네비게이션·카드 그리드가 있습니다. 여기서는 패턴만 정리합니다. 네비게이션: 한 줄에 로고 | 메뉴 | 액션을 두려면 부모에 display: flex, justify-content: space-between, align-items: center, 메뉴는 display: flex + gap이 기본 조합입니다. 모바일에서는 flex-direction: column 또는 햄버거 메뉴로 바꿉니다. 카드 그리드: flex-wrap: wrap + flex: 1 1 280px처럼 최소 너비를 basis로 두면, 화면이 좁아질수록 자연스럽게 줄바꿈됩니다. 마지막 줄 정렬이 어색하면 Grid의 auto-fit/minmax를 검토합니다(해당 글 Grid 편 참고).

16. 흔한 실수 추가

  1. justify-content로 세로 중앙 정렬을 기대: 주축이 가로일 때는 세로 정렬은 align-items입니다.
  2. flex: 1인데 내용이 안 줄어듦: 자식에 min-width: 0(또는 세로 스택이면 min-height: 0)을 주지 않아 최소 크기가 콘텐츠에 막힌 경우가 많습니다.
  3. gap과 margin을 동시에 중복: 간격이 두 배로 벌어져 보입니다. 한 가지 방식으로 통일합니다.
  4. 중첩 flex마다 height: 100% 남발: 부모 높이가 불명확하면 기대와 다릅니다. flex: 1 + min-height: 0 조합을 우선 검토합니다.

내부 동작과 핵심 메커니즘

이 글의 주제는 「[2026] CSS Flexbox 완벽 가이드 — 레이아웃 알고리즘·flex-shrink·실무 패턴」입니다. 앞선 튜토리얼을 구현·런타임 관점에서 다시 압축합니다. 구성 요소 간 책임 분리와 관측 가능한 지점을 기준으로 “입력이 어디서 검증되고, 핵심 연산이 어디서 일어나며, 부작용(I/O·네트워크·디스크)·동시성이 어디서 터지는가”를 한 장면으로 그리면 장애 분석이 빨라집니다.

처리 파이프라인(개념도)

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

경계에서의 지연·실패(시퀀스 관점)

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(프로세스·런타임·게이트웨이)
  participant D as 의존성(외부 API·DB·큐)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

알고리즘·프로토콜·리소스 관점 체크포인트

  • 불변 조건(Invariant): 각 단계가 만족해야 하는 조건(버퍼 경계, 프로토콜 상태, 트랜잭션 격리, 파일 디스크립터 상한)을 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
  • 결정성: 동일 입력에 동일 출력이 보장되는 순수 층과, 시간·네트워크·스레드 스케줄에 의해 달라질 수 있는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
  • 경계 비용: 직렬화/역직렬화, 문자 인코딩, syscall 횟수, 락 경합, GC·할당, 캐시 미스처럼 누적 비용을 의심 목록에 넣습니다.
  • 백프레셔: 생산자가 소비자보다 빠를 때(소켓 버퍼, 큐 깊이, 스트림) 어디서 어떤 신호로 속도를 줄일지 정의합니다.

프로덕션 운영 패턴

실서비스에서는 기능과 함께 관측·배포·보안·비용·규제가 동시에 요구됩니다.

영역운영 관점 질문
관측성요청 단위 상관 ID, 에러율/지연 분위수(p95/p99), 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능캐시 계층·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포롤백 룬북, 카나리/블루그린, 마이그레이션 호환성·플래그가 문서화되어 있는가
용량피크 트래픽·디스크·파일 디스크립터·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 가능한 한 프로덕션에 가깝게 맞추는 것이 재현율을 높입니다.

확장 예시: 엔드투엔드 미니 시나리오

「[2026] CSS Flexbox 완벽 가이드 — 레이아웃 알고리즘·flex-shrink·실무 패턴」을 실제 배포·운영 흐름으로 옮긴 체크리스트형 시나리오입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

  1. 입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드 표를 API 또는 이벤트 경계에 둔다.
  2. 핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 한 화면(로그+메트릭+트레이스)에서 추적한다.
  3. 실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
  4. 호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지(또는 피처 플래그) 확인한다.
  5. 부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값이 기대 범위인지 본다.

의사코드 스케치(프레임워크 무관)

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)        // 경계에서 거절
  authorize(validated, ctx)                  // 권한·테넌트
  result = domainCore(validated)             // 순수에 가까운 규칙
  persistOrEmit(result, idempotentKey)       // I/O: 멱등·재시도 정책
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상가능 원인조치
간헐적 실패레이스, 타임아웃, 외부 의존성 불안정, DNS최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패환경 변수, 권한, 플랫폼 차이, lockfileCI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정이 로컬과 다름프로필·시크릿·기본값, 지역 리전단일 소스(예: 스키마 검증된 설정)와 배포 매트릭스 표준화
데이터 불일치비멱등 재시도, 부분 쓰기, 캐시 무효화 누락멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

정리

핵심 요약

  1. display: flex: Flexbox 활성화
  2. flex-direction: 주축 방향 (row/column)
  3. justify-content: 주축 정렬(주로 여유 공간이 있을 때 배치 방식이 달라짐)
  4. align-items: 교차축 정렬
  5. flex-wrap: 줄바꿈 설정
  6. flex: grow shrink basis 축약 — 양의 여유는 flex-grow, 음의 여유(넘침) 는 flex-shrink로 분배
  7. gap: 아이템 간격
  8. flex-basis vs width: 주축 기준은 flex-basis 중심으로 이해하고, flex-basis: auto일 때 width/height가 기여한다고 보면 혼란이 줄어듦
  9. min-width/min-height: 0: 말줄임·스크롤·가변 폭에서 레이아웃이 막힐 때 우선 확인

Flexbox 속성 치트시트

속성대상설명
display: flexContainerFlexbox 활성화
flex-directionContainer주축 방향 (row/column)
justify-contentContainer주축 정렬
align-itemsContainer교차축 정렬
align-contentContainer여러 줄 정렬
flex-wrapContainer줄바꿈
gapContainer간격
flexItemgrow shrink basis
flex-growItem늘어남 비율
flex-shrinkItem줄어듦 비율
flex-basisItem기본 크기
align-selfItem개별 정렬
orderItem순서 변경

실전 팁

  1. gap 사용: margin보다 간단하고 명확
  2. flex: 1: 균등 분배의 기본
  3. min-width: 0: 텍스트 오버플로우 방지
  4. align-items: center: 수직 중앙 정렬
  5. justify-content: space-between: 양끝 정렬
  6. flex-wrap: wrap: 반응형 카드 그리드
  7. order: HTML 순서 변경 없이 시각적 순서 변경
  8. Chrome DevTools: Flexbox 디버깅 도구 활용

다음 단계

  • CSS Grid 레이아웃
  • 반응형 웹 디자인
  • CSS 애니메이션

관련 글