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

내용