📐
EPISODE 05
1차원 레이아웃의 표준
Flexbox
1차원(가로 또는 세로) 레이아웃을 손쉽게 만드는 Flexbox — flex-direction, justify-content, align-items, gap, flex-wrap, flex 단축속성, order, align-self까지.
CSSFlexbox레이아웃
소요 시간
⏱ 60분
난이도
📊 초보
선수 조건
🎯 css-04
결과물
네비게이션 바, 카드 3열 배치, 완전 중앙 정렬
이 강의에서 배우는 것
- 1Flex Container와 Flex Item의 관계를 이해한다
- 2flex-direction으로 주축 방향을 바꾼다
- 3justify-content / align-items로 두 축 정렬을 한다
- 4flex-wrap, gap으로 줄바꿈과 간격을 조절한다
- 5flex: 1, flex: 0 0 200px 같은 단축속성을 사용한다
1. 기본 개념
css
.container {
display: flex;
}- Flex Container: display: flex가 적용된 부모
- Flex Item: Container의 직계 자식들
2. flex-direction
css
flex-direction: row; /* 기본: 왼→오 */
flex-direction: row-reverse;
flex-direction: column; /* 위→아래 */
flex-direction: column-reverse;3. justify-content (주축)
css
justify-content: flex-start; /* 기본 */
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* 첫/끝 고정, 사이 균등 */
justify-content: space-around; /* 양쪽 균등 */
justify-content: space-evenly; /* 모든 간격 동일 */4. align-items (교차축)
css
align-items: stretch; /* 기본: 꽉 채움 */
align-items: flex-start;
align-items: flex-end;
align-items: center; /* 수직 중앙 정렬 */
align-items: baseline;5. flex-wrap & gap
css
.container {
flex-wrap: nowrap; /* 기본 */
flex-wrap: wrap; /* 넘치면 다음 줄로 */
gap: 16px; /* 행/열 동일 */
gap: 20px 10px; /* 행 20, 열 10 */
}6. Flex Item 속성
css
.item {
flex-grow: 1; /* 남은 공간 분배 비율 */
flex-shrink: 1; /* 부족할 때 줄어드는 비율 */
flex-basis: auto; /* 기본 크기 */
flex: 1; /* 1 1 0 단축 */
flex: 0 0 200px; /* 고정 200px */
order: 2; /* 표시 순서 */
align-self: center; /* 이 아이템만 따로 정렬 */
}7. 자주 쓰는 패턴
완전 중앙 정렬
css
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}네비게이션 바
css
.navbar {
display: flex;
justify-content: space-between; /* 로고 왼쪽, 메뉴 오른쪽 */
align-items: center;
padding: 0 20px;
}