레슨 3 / 9·20분
레이아웃과 Flexbox
Flexbox란?
Flexbox(Flexible Box Layout)는 1차원 레이아웃을 쉽게 구성할 수 있는 CSS 레이아웃 모델입니다. 요소들을 가로 또는 세로 방향으로 정렬하고, 간격을 조절하고, 크기를 유연하게 조정할 수 있습니다. 과거 float나 inline-block으로 힘들게 만들던 레이아웃을 간결하게 구현할 수 있습니다.
Flex 컨테이너와 아이템
Flexbox를 사용하려면 부모 요소에 display: flex를 선언합니다. 이 부모가 **flex 컨테이너**, 그 안의 직접 자식들이 **flex 아이템**이 됩니다.
html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>css
.container {
display: flex; /* Flexbox 활성화 */
justify-content: center; /* 주축(가로) 정렬: 가운데 */
align-items: center; /* 교차축(세로) 정렬: 가운데 */
gap: 16px; /* 아이템 사이 간격 */
height: 300px;
background-color: #f0f0f0;
}
.item {
padding: 20px 32px;
background-color: #4a90d9;
color: white;
border-radius: 8px;
font-size: 18px;
}주요 Flexbox 속성
- •
flex-direction- 배치 방향 설정:row(가로, 기본값),column(세로),row-reverse,column-reverse - •
justify-content- 주축 정렬:flex-start,center,flex-end,space-between,space-around,space-evenly - •
align-items- 교차축 정렬:flex-start,center,flex-end,stretch(기본값),baseline - •
flex-wrap- 줄 바꿈:nowrap(기본값),wrap(넘치면 다음 줄로) - •
gap- 아이템 간 간격:gap: 16px또는row-gap,column-gap별도 설정
css
/* 내비게이션 바: 로고 왼쪽, 메뉴 오른쪽 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
}
/* 카드 그리드: 줄 바꿈 허용 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card-grid .card {
flex: 1 1 280px; /* 최소 280px, 남는 공간 균등 분배 */
}
/* 세로 중앙 정렬 (화면 가운데 배치) */
.center-screen {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}💡
justify-content: space-between은 첫 아이템은 시작점, 마지막 아이템은 끝점에 놓고 나머지를 균등 배분합니다. 내비게이션 바처럼 양쪽 끝에 요소를 배치할 때 매우 유용합니다. Flexbox만으로 부족할 때는 2차원 레이아웃을 지원하는 CSS Grid를 함께 학습해 보세요.