CSS Flexbox | 플렉스박스 레이아웃 완벽 가이드

· 26분 읽기 · 수정 중급 튜토리얼
CSS Flexbox | 플렉스박스 레이아웃 완벽 가이드

이 글의 핵심

CSS Flexbox에 대한 실전 가이드입니다. 플렉스박스 레이아웃 완벽 가이드 등을 예제와 함께 상세히 설명합니다.

들어가며

”레이아웃의 혁명, Flexbox”

Flexbox는 CSS의 1차원 레이아웃 모듈로, 가로 또는 세로 한 방향으로 자식 요소를 느낌 있게 정렬할 수 있습니다.

비유(유연한 선반): 컨테이너는 길이가 늘어나는 유연한 선반이고, 아이템은 그 위에 놓인 물건이라고 보시면 됩니다. 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 -->

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="[email protected]">
            </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 조합을 우선 검토합니다.

정리

핵심 요약

  1. display: flex: Flexbox 활성화
  2. flex-direction: 주축 방향 (row/column)
  3. justify-content: 주축 정렬
  4. align-items: 교차축 정렬
  5. flex-wrap: 줄바꿈 설정
  6. flex: grow shrink basis 축약
  7. gap: 아이템 간격

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 애니메이션

관련 글

  • CSS 박스 모델 | Margin, Padding, Border 완벽 정리
  • CSS Grid | 그리드 레이아웃 완벽 가이드
  • HTML/CSS 시작하기 | 웹 개발 첫걸음
  • CSS 기초 | 선택자, 속성, 색상, 폰트
  • 반응형 웹 디자인 | 미디어 쿼리와 모바일 최적화