반응형
안녕하세요, 토스트데브입니다!
지난 글에서 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정렬
반응형