Flexbox 레이아웃 예제

1. 기본 Flex 컨테이너

display: flex를 적용하면 자식 요소들이 가로로 배치됩니다.

1
2
3

2. flex-direction

row (기본값)

1
2
3

row-reverse

1
2
3

column

1
2
3

column-reverse

1
2
3

3. justify-content (주축 정렬)

flex-start (기본값)

1
2
3

flex-end

1
2
3

center

1
2
3

space-between

1
2
3

space-around

1
2
3

space-evenly

1
2
3

4. align-items (교차축 정렬)

stretch (기본값)

1
2
3

flex-start

1
2
3

flex-end

1
2
3

center

1
2
3

baseline

작은 텍스트
큰 텍스트
중간 텍스트

5. flex-wrap

nowrap (기본값)

1
2
3
4
5

wrap

1
2
3
4
5

wrap-reverse

1
2
3
4
5

6. flex-grow, flex-shrink, flex-basis

flex-grow

grow: 1
grow: 2
grow: 1

flex-basis

basis: 100px
basis: 200px
basis: 150px

flex 단축 속성

flex: 1
flex: 2
flex: 1

7. align-self (개별 정렬)

start
center
end
stretch

8. order (순서 변경)

1 (order: 3)
2 (order: 1)
3 (order: 2)

9. gap (간격)

gap: 20px

1
2
3

row-gap: 30px, column-gap: 10px

1
2
3
4

10. 실전 예제: 완전 중앙 정렬

완전 중앙!

11. 실전 예제: 네비게이션 바

12. 실전 예제: 카드 레이아웃

Card 1

내용이 들어갑니다.

Card 2

조금 더 긴 내용이 들어갑니다. 카드 높이가 다를 수 있습니다.

Card 3

내용