flex-direction 완전정복 – 방향만 바꿨는데 레이아웃이 확 달라진다!

 

 

Flexbox를 쓸 때 가장 먼저 설정해야 하는 속성이 있습니다.
바로 flex-direction입니다.

이 속성은 아이템들이 나열되는 기본 방향을 정해주는 역할을 합니다.
그런데 이 방향 하나만 바꿨을 뿐인데, 전체 레이아웃이 완전히 달라져 보이는 경험, 해보신 적 있으시죠?

이번 포스팅에서는 flex-direction의 기본 개념부터
각 속성값이 실제로 어떻게 작동하는지 차근차근 살펴보겠습니다!

 

---

✅ 기본 문법

.container {
  display: flex;
  flex-direction: row; /* 기본값 */
}

 

flex-direction은 Flexbox의 주축(main axis) 방향을 설정해주는 속성입니다.
주축이 어디냐에 따라 justify-content, align-items 같은 정렬 방식도 달라져요!

 

---

 

🎯 사용 가능한 값들

속성값	설명	방향
row	기본값. 아이템을 **가로 방향(왼 → 오)**으로 정렬	▶▶▶
row-reverse	가로 반대 방향(오 → 왼) 정렬	◀◀◀
column	**세로 방향(위 → 아래)**로 정렬	▼▼▼
column-reverse	세로 반대 방향(아래 → 위) 정렬	▲▲▲

 

---

 

🧪 실습 예시

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
}
.item {
  padding: 20px;
  background: #ffa07a;
  margin: 5px;
}
</style>

 

위 코드는 아이템들을 위에서 아래로 세로로 나열하게 만듭니다.

 

---

 

🧭 주의할 점

• flex-direction에 따라 justify-content가 적용되는 방향이 달라집니다.
  row일 땐 가로 기준, column일 땐 세로 기준이에요.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 이젠 세로 중앙 정렬이 됩니다! */
}

 

---

 

🔁 언제 유용할까?

• 모바일 버전에서 세로 정렬 UI 만들 때
• 버튼 그룹을 세로로 정렬할 때
• 화면 방향에 따라 반응형 레이아웃 만들 때