CSS 플렉스박스(Flexbox) 완벽 가이드: 쉽고 빠른 레이아웃 정복

반응형


웹 페이지의 요소를 배치하고 정렬하는 데 가장 효율적인 방법 중 하나가 CSS 플렉스박스(Flexbox)입니다. 이 글에서는 플렉스박스의 기초부터 고급 활용법까지 단계적으로 설명하며, 실전에서 바로 사용할 수 있는 예제 코드도 제공합니다.

1. CSS 플렉스박스란?


플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 요소를 배치하고 정렬하는 데 최적화된 방식입니다. 요소를 가로 또는 세로로 정렬하며, 공간 분배와 정렬을 효율적으로 처리할 수 있습니다.

플렉스박스를 사용하면 다음과 같은 작업이 쉬워집니다:
• 가로 및 세로 중앙 정렬
• 동적인 공간 분배
• 반응형 레이아웃 구현

2. 플렉스 컨테이너와 아이템


플렉스박스를 사용하려면 플렉스 컨테이너(flex container)와 플렉스 아이템(flex item)을 이해해야 합니다.
• 플렉스 컨테이너: display: flex;를 설정한 부모 요소.
• 플렉스 아이템: 플렉스 컨테이너 안에 포함된 자식 요소들.

.container {
    display: flex;
}

<div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

3. 플렉스 컨테이너의 주요 속성

3-1. flex-direction (플렉스 방향)


플렉스 아이템의 배치 방향을 설정합니다.
• row (기본값): 가로 방향 (왼쪽에서 오른쪽)
• row-reverse: 가로 방향 (오른쪽에서 왼쪽)
• column: 세로 방향 (위에서 아래)
• column-reverse: 세로 방향 (아래에서 위)

.container {
    display: flex;
    flex-direction: column;
}

3-2. justify-content (주축 정렬)


플렉스 아이템을 주축(main axis) 기준으로 정렬합니다.
• flex-start (기본값): 시작 지점에 정렬
• flex-end: 끝 지점에 정렬
• center: 중앙 정렬
• space-between: 아이템 간 동일한 간격
• space-around: 아이템 주위 동일한 간격

.container {
    display: flex;
    justify-content: center;
}

3-3. align-items (교차축 정렬)


플렉스 아이템을 교차축(cross axis) 기준으로 정렬합니다.
• stretch (기본값): 아이템을 컨테이너 높이에 맞춤
• flex-start: 교차축 시작 지점에 정렬
• flex-end: 교차축 끝 지점에 정렬
• center: 중앙 정렬
• baseline: 텍스트 기준선 정렬

.container {
    display: flex;
    align-items: center;
}

3-4. flex-wrap (줄바꿈)


아이템이 컨테이너를 넘어갈 때 줄바꿈 여부를 설정합니다.
• nowrap (기본값): 줄바꿈 없음
• wrap: 줄바꿈
• wrap-reverse: 줄바꿈 (반대 방향)

.container {
    display: flex;
    flex-wrap: wrap;
}

4. 플렉스 아이템의 주요 속성

4-1. flex (크기 비율)

플렉스 아이템의 크기를 비율로 설정합니다.
flex: [grow] [shrink] [basis]
• flex-grow: 남은 공간을 차지하는 비율
• flex-shrink: 공간이 부족할 때 줄어드는 비율
• flex-basis: 아이템의 기본 크기

.item {
    flex: 1; /* 모든 아이템이 동일한 비율로 크기 조정 */
}


4-2. align-self (개별 정렬)


플렉스 컨테이너 안에서 특정 아이템만 교차축 기준으로 정렬합니다.
• auto (기본값): align-items 값 상속
• flex-start: 교차축 시작
• flex-end: 교차축 끝
• center: 중앙
• baseline: 텍스트 기준선
• stretch: 컨테이너 높이에 맞춤

.item {
    align-self: flex-end;
}

5. 실전 예제: 플렉스박스 레이아웃 만들기


HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스박스 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>


CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.item {
    width: 100px;
    height: 100px;
    background-color: #007bff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
}


결과: 가로로 정렬된 3개의 박스가 균등하게 공간을 차지합니다. 박스는 중앙 정렬되고, 반응형으로 레이아웃이 유지됩니다.

6. 플렉스박스 활용 팁


1. 가로 및 세로 중앙 정렬:
플렉스 컨테이너에 justify-content: center;와 align-items: center;를 결합하면 간단히 중앙 정렬이 가능합니다.

2. 반응형 레이아웃:
flex-wrap을 활용해 화면 크기에 따라 아이템이 줄바꿈되도록 설정하세요.

3. 정렬 및 간격 문제 해결:
gap 속성을 사용하면 아이템 간 간격을 쉽게 설정할 수 있습니다.

.container {
    gap: 20px;
}


CSS 플렉스박스는 간단하면서도 강력한 레이아웃 도구로, 가로 및 세로 정렬, 공간 분배, 반응형 디자인 등 다양한 레이아웃 요구를 충족합니다. 이 글에서 소개한 개념과 예제를 실습하며 플렉스박스를 완벽히 이해해 보세요.

다음 글에서는 CSS Grid를 활용한 고급 레이아웃 설계를 다룰 예정입니다.

반응형