CSS Flexbox – 유연한 레이아웃을 만드는 방법

1. CSS Flexbox란?

CSS Flexbox(플렉스 박스)는 1차원 레이아웃 시스템으로, 요소들을 가로(행) 또는 세로(열) 방향으로 정렬하는 데 최적화된 CSS 기능입니다. 기존의 float, inline-block을 이용한 레이아웃보다 더 직관적이고 유연한 방식으로 요소 배치가 가능합니다.

Flexbox의 핵심은 부모 요소(컨테이너)와 자식 요소(아이템) 간의 관계입니다. 부모 요소를 Flex Container로 설정하면 내부의 자식 요소들은 자동으로 Flex Item이 되어 배치됩니다.

이번 글에서는 CSS Flexbox의 핵심 개념과 주요 속성을 살펴보고, 실전 예제를 통해 활용 방법을 익혀보겠습니다.

2. CSS Flexbox의 기본 개념

(1) Flex Container와 Flex Item

Flexbox를 사용하려면 부모 요소를 Flex Container로 지정해야 합니다.

css

복사편집

.container { display: flex; }

이렇게 하면 .container 내부의 모든 자식 요소가 자동으로 Flex Item이 되어 정렬됩니다.

(2) flex-direction – 정렬 방향 설정

Flexbox는 기본적으로 가로(row) 정렬을 합니다. 하지만 flex-direction 속성을 이용하면 방향을 변경할 수 있습니다.

css

복사편집

.container { display: flex; flex-direction: row; /* 기본값 */ } .container-column { display: flex; flex-direction: column; }

• row(기본값) – 왼쪽에서 오른쪽으로 정렬
• row-reverse – 오른쪽에서 왼쪽으로 정렬
• column – 위에서 아래로 정렬
• column-reverse – 아래에서 위로 정렬

3. 주요 CSS Flexbox 속성

(1) justify-content – 주 축(메인 축) 정렬

요소들이 배치되는 주 축(main axis) 방향의 정렬 방식을 설정합니다.

css

복사편집

.container { display: flex; justify-content: space-between; }

• flex-start(기본값) – 왼쪽 정렬
• flex-end – 오른쪽 정렬
• center – 중앙 정렬
• space-between – 첫 번째와 마지막 아이템을 양 끝에 배치, 나머지는 균등한 간격
• space-around – 아이템 사이와 양 끝에 동일한 간격 배치
• space-evenly – 모든 아이템이 동일한 간격으로 배치

(2) align-items – 교차 축(수직 축) 정렬

아이템들이 배치되는 교차 축(cross axis) 방향의 정렬 방식을 설정합니다.

css

복사편집

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

• stretch(기본값) – 컨테이너 높이에 맞게 아이템 크기 자동 조정
• flex-start – 위쪽 정렬
• flex-end – 아래쪽 정렬
• center – 수직 중앙 정렬
• baseline – 텍스트 기준선에 맞춰 정렬

(3) flex-wrap – 여러 줄 배치 여부

기본적으로 Flexbox는 한 줄에 모든 아이템을 배치하려고 합니다. 하지만 flex-wrap 속성을 설정하면 여러 줄에 걸쳐 배치할 수도 있습니다.

css

복사편집

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

• nowrap(기본값) – 한 줄에 모든 아이템을 배치
• wrap – 여러 줄로 나누어 배치
• wrap-reverse – 여러 줄로 배치하되, 역순 정렬

(4) align-content – 여러 줄 정렬

여러 줄의 아이템이 있을 때, 교차 축에서 줄 간의 정렬 방식을 설정하는 속성입니다.

css

복사편집

.container { display: flex; flex-wrap: wrap; align-content: center; }

• flex-start – 위쪽 정렬
• flex-end – 아래쪽 정렬
• center – 중앙 정렬
• space-between – 첫 번째와 마지막 줄을 양 끝에 배치, 나머지는 균등한 간격
• space-around – 모든 줄 사이에 동일한 간격 배치

(5) flex – 개별 아이템의 크기 조정

flex 속성은 각 아이템이 차지하는 공간을 조정하는 역할을 합니다.

css

복사편집

.item { flex: 1; }

• flex-grow: 아이템이 남은 공간을 차지하는 비율 (flex: 1 → 동일 비율로 공간 차지)
• flex-shrink: 화면이 줄어들 때 아이템이 축소되는 비율
• flex-basis: 아이템의 기본 크기 (auto, px, %, fr 등 설정 가능)

4. 실전 예제 – 반응형 네비게이션 바 만들기

Flexbox를 활용하여 반응형 네비게이션 바를 만들어보겠습니다.

HTML

html

복사편집

<nav class="nav"> <div class="logo">Logo</div> <ul class="menu"> <li>Home</li> <li>About</li> <li>Services</li> <li>Contact</li> </ul> </nav>

CSS

css

복사편집

.nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #333; color: white; } .menu { display: flex; list-style: none; gap: 20px; } .menu li { cursor: pointer; }

설명

• .nav에 display: flex; justify-content: space-between;을 설정해 로고와 메뉴를 양쪽으로 배치
• .menu에 display: flex; gap: 20px;을 적용해 메뉴 아이템 간의 간격 조정
• align-items: center;를 설정해 네비게이션 바 내부 요소를 수직 중앙 정렬

5. 결론

CSS Flexbox는 1차원 레이아웃을 쉽고 유연하게 관리할 수 있도록 돕는 강력한 도구입니다.

주요 개념을 정리하면 다음과 같습니다.

• display: flex – Flex 컨테이너 활성화
• flex-direction – 정렬 방향 설정 (row, column)
• justify-content – 주 축 방향 정렬 (start, center, space-between 등)
• align-items – 교차 축 방향 정렬 (start, center, stretch 등)
• flex-wrap – 여러 줄 배치 여부 (nowrap, wrap)
• flex – 개별 아이템 크기 조정 (flex: 1 등)

Flexbox는 네비게이션 바, 카드 레이아웃, 버튼 그룹 정렬 등 다양한 UI 구성에 필수적입니다.
연습을 통해 익숙해지면 반응형 웹 디자인에서도 매우 유용하게 활용할 수 있습니다.