[CSS] Flexbox 완벽 가이드 – 레이아웃을 유연하게 디자인하는 방법

웹 개발에서 레이아웃을 효율적으로 배치하는 것은 매우 중요합니다.
특히 반응형 웹을 만들 때, 기존의 float이나 position을 사용하는 방식보다 Flexbox(Flexible Box)를 활용하면 훨씬 쉽고 직관적인 레이아웃 구성이 가능합니다.

이번 포스팅에서는 CSS Flexbox의 개념부터 실전 예제까지 알아보겠습니다.

---

1. Flexbox란?

📌 Flexbox(플렉스박스)의 특징

• 수평, 수직 정렬이 쉬움 – justify-content, align-items를 활용하여 간단하게 정렬 가능
• 동적인 크기 조절 가능 – 화면 크기에 따라 유연한 레이아웃 구성
• 복잡한 UI 배치를 간결하게 구현 가능

---

2. Flexbox 기본 개념

Flexbox를 사용하려면 부모 요소에 display: flex; 속성을 적용해야 합니다.
이때 부모 요소를 "Flex Container", 자식 요소를 "Flex Item"이라고 합니다.

.container {
    display: flex;  /* Flexbox 적용 */
}

---

3. Flex 컨테이너의 주요 속성

Flexbox에서 부모 요소(컨테이너)에 적용할 수 있는 주요 속성들을 살펴보겠습니다.

(1) flex-direction – 주축(메인 축) 방향 설정

요소들을 어떤 방향으로 정렬할지 결정합니다.

.container {
    display: flex;
    flex-direction: row;  /* 기본값: 가로 정렬 */
}

값	설명
row	왼쪽 -> 오른쪽(기본값)
row-reverse	오른쪽 → 왼쪽
column	위 → 아래
column-reverse	아래 → 위

 

(2) justify-content – 주축 정렬(가로 정렬)

요소들을 주축(main axis)을 기준으로 정렬합니다.

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

값	설명
flex-start	왼쪽 정렬(기본값)
flex-end	오른쪽 정렬
center	가운데 정렬
space-between	요소 사이 간격 균등 배치
space-around	요소 주위 간격 균등 배치
space-evenly	요소와 여백을 균등 분배

 

(3) align-items – 교차축 정렬(세로 정렬)

요소들을 교차축(cross axis)을 기준으로 정렬합니다.

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

값	설명
flex-start	위쪽 정렬
flex-end	아래쪽 정렬
center	가운데 정렬
baseline	텍스트 기준선 정렬
stretch	컨테이너 높이에 맞게 늘어남(기본값)

 

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

기본적으로 Flexbox는 한 줄에 모든 요소를 배치하지만, flex-wrap 속성을 사용하면 여러 줄로 나눌 수 있습니다.

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

값	설명
nowrap	한 줄에 배치(기본값)
wrap	여러 줄 배치 (줄이 자동으로 추가됨)
wrap-reverse	여러 줄 배치(위에서 아래로)

 

4. Flex 아이템의 주요 속성

Flexbox는 자식 요소(Flex 아이템)에도 여러 가지 속성을 제공합니다.

(1) flex-grow – 아이템의 확장 비율

부모 요소의 남은 공간을 얼마나 차지할지 설정합니다.

.item {
    flex-grow: 1;  /* 남은 공간을 동일하게 나눔 */
}

값	설명
0	크기를 늘리지 않음 (기본값)
1	남은 공간을 균등하게 나눔
2	다른 요소보다 2배 더 크게 설정

 

(2) flex-shrink – 아이템의 축소 비율

공간이 부족할 때 요소가 얼마나 줄어들 수 있는지 설정합니다.

.item {
    flex-shrink: 0;  /* 크기를 줄이지 않음 */
}

값	설명
0	크기를 줄이지 않음
1	기본 축소 비율 (자동 조정)

 

(3) flex-basis – 기본 크기 설정

Flexbox에서 요소의 기본 크기(너비 또는 높이)를 설정할 수 있습니다.

.item {
    flex-basis: 100px;  /* 기본 너비 100px */
}

값	설명
auto	기본 크기(기본값)
px, %, em	특정 크기 지정

 

5. Flexbox 예제 코드

아래 예제는 가운데 정렬 및 반응형 레이아웃을 구현한 코드입니다.

See the Pen Untitled by wpfhorez4 (@wpfhorez4) on CodePen.