[CSS] #10 Flexbox & Grid, CSS Flexbox 완벽 가이드! 레이아웃 정렬부터 축 개념까지 쉽게 배우기

 

 

안녕하세요, 토스트데브입니다!
지난 글에서 CSS의 전통적인 레이아웃 구성 방법들을 살펴봤는데요, 오늘은 현대적인 CSS 레이아웃 방식 중 하나인 Flexbox(Flexible Box)에 대해 정리해보겠습니다.

Flexbox는 요소들을 쉽고 유연하게 정렬하고 배치할 수 있는 강력한 도구입니다.
특히 수평/수직 정렬, 공간 배분, 반응형 레이아웃에 강점을 가집니다.

 

 

1️⃣ Flexbox란?

Flexbox(Flexible Box Layout)는 1차원(가로 또는 세로 한 방향) 레이아웃 시스템으로, 정렬, 배치, 공간 분배를 쉽게 처리할 수 있게 만들어졌습니다.

기본적으로 부모 요소에 display: flex를 지정하면, 자식 요소들이 자동으로 flex item(플렉스 항목)으로 인식되어 동작합니다.

 

 

2️⃣ 기본 구조

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

.container {
  display: flex;
}

 

• .container: flex 컨테이너 (부모)
• .item: flex 아이템 (자식)

 

 

3️⃣ 주축(Main Axis)과 교차축(Cross Axis)

Flexbox에서 레이아웃은 축(Axis) 개념으로 작동합니다.

용어	설명
Main Axis	주 방향 (기본: 수평 → 왼쪽 ➡ 오른쪽)
Cross Axis	교차 방향 (기본: 수직 ⬇ 아래로)

💡 flex-direction을 바꾸면 축의 방향도 바뀝니다!

 

 

4️⃣ 주요 속성 정리

✅ 1. flex-direction – 주축 방향 설정

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

 

 

값	방향	설명
row	가로 →	기본 (왼쪽 ➡ 오른쪽)
row-reverse	가로 ←	오른쪽 ➡ 왼쪽
column	세로 ⬇	위 ➡ 아래
column-reverse	세로 ⬆	아래 ➡ 위

 

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

.container {
  justify-content: center;
}

 

값	설명
flex-start	시작 위치 정렬 (기본)
flex-end	끝에 정렬
center	가운데 정렬
space-between	양쪽 정렬, 중간은 균등 간격
space-around	요소 주변에 균등 여백
space-evenly	모든 간격을 균등하게

 

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

.container {
  align-items: center;
}

 

값	설명
stretch	아이템 높이 늘리기 (기본)
flex-start	위쪽 정렬
flex-end	아래쪽 정렬
center	세로 중앙 정렬
baseline	텍스트 기준선 맞춤

 

✅ 4. flex-wrap – 줄 바꿈 허용 여부

.container {
  flex-wrap: wrap;
}

 

값	설명
nowrap	한 줄 유지 (기본값)
wrap	자동 줄바꿈
wrap-reverse	줄바꿈 후 역순 배치

 

✅ 5. align-content – 여러 줄 정렬

flex-wrap으로 여러 줄이 생겼을 때, 줄 간의 정렬 방식을 설정합니다.

.container {
  align-content: space-between;
}

 

 

5️⃣ 개별 아이템 속성

✅ flex – 비율 기반 크기 지정

.item {
  flex: 1; /* 같은 비율로 공간 나눔 */
}

flex: 2는 flex: 1보다 두 배 넓게 차지

 

✅ align-self – 특정 아이템만 교차축 정렬 변경

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

 

 

6️⃣ 실전 예시

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

이렇게 하면:

• 아이템들이 가로 방향으로 나란히 배치되고
• 양쪽 끝에 정렬되며
• 세로 중앙으로 정렬됩니다.

 

 

✅ 정리하며…

Flexbox는 간단한 정렬부터 반응형 배치까지 매우 유용한 레이아웃 도구입니다.
처음엔 생소할 수 있지만, 실무에서 메뉴, 카드, 리스트, 정렬 등 다양하게 활용되므로 꼭 익혀두세요!

 

#Flexbox #CSS레이아웃 #displayFlex #웹디자인기초 #프론트엔드기초 #CSS기초 #정렬속성 #웹개발입문 #플렉스박스 #flex정렬