가이드 목록으로
입문
Flexbox 기초
한 줄 배치의 마법! 가로/세로 정렬, 간격 조절 등 Flexbox 핵심 개념을 배웁니다.
Flexbox란?
Flex는 유연하게 늘어나고 줄어드는 것, Box는 상자예요. 즉, "유연한 상자 배치" 시스템이죠!
택배 상자 안에 물건들을 정리하는 것처럼, Flexbox는 요소들을 한 줄로 깔끔하게 정렬해줘요.
박스 1
박스 2
박스 3
✓ flex를 적용하면 자동으로 가로 배치!
바이브코딩 팁
"이 버튼들을 가로로 나란히 배치해줘"
방향 (flex-direction)
요소들이 나열되는 방향을 정해요.
정방향
A
B
C
바이브코딩 팁
"이 카드들을 세로로 쌓아줘"
주축 정렬 (justify-content)
진행 방향으로 어떻게 정렬할지 정해요.
1
2
3
바이브코딩 팁
"로고는 왼쪽, 메뉴는 오른쪽 끝에 배치해줘"
교차축 정렬 (align-items)
진행 방향의 수직으로 어떻게 정렬할지 정해요.
48px
72px
56px
40px
바이브코딩 팁
"아이콘이랑 텍스트 세로 가운데 맞춰줘"
간격 (gap)
요소들 사이에 균일한 간격을 줘요.
간격 (gap)16px
1
2
3
4
바이브코딩 팁
"버튼들 사이에 16px 간격 줘"
실전 예시
네비게이션 메뉴
Logo
홈서비스소개연락처
카드 내부 레이아웃
이미지
카드 제목
설명 텍스트가 들어갑니다.
버튼 그룹 (가운데 정렬)
Footer (양끝 정렬)
© 2026 Company
이용약관개인정보처리방침