[CSS ] 11. Flexbox 예제 모음

[CSS ] 11. Flexbox 예제 모음

---

이 글은 Flexbox 동작 예제를 모아놓은 글이다. 예제는 CodePen 결과 화면을 iframe으로 불러와 티스토리 스킨 CSS와 겹치지 않도록 구성했다.

---

예제 목록

• 기본 row 정렬
• column 방향
• justify-content center
• space-between
• align-items center
• gap
• wrap
• order
• flex-grow
• 가로+세로 가운데 정렬

---

예제 실행 화면

---

정리

• Flexbox는 한 방향 정렬과 간격 조절에 유리하다.
• justify-content는 주축(가로 방향) 정렬을 담당한다.
• align-items는 교차축(세로 방향) 정렬을 담당한다.
• flex-wrap, order, flex-grow는 배치 배율 및 순서를 조정한다.
• iframe height는 예제가 길다면 값을 조금 늘려도 된다.