Flexbox: Flex Direction

✅ Flexbox에서 flex-direction 심화 학습

이 강의에서는 flex-direction 속성을 활용해 Flexbox 레이아웃을 원하는 방향으로 변경하는 방법을 다룬다. 기본 개념부터 심화까지 함께 정리해 보도록 하겠다.

---

✨ 기본 HTML 흐름

• 인라인 요소 → 한 줄로 계속 나열한다 (공간 없을 때 줄바꿈).
• 블록 요소 → 위에서 아래로 쌓인다.

🌿 Flexbox의 기본 동작

• 요소를 flex 컨테이너 안에 넣으면 기본적으로 행(row) 방향으로 나열된다.
• 기본값: flex-direction: row;
  • 메인 축(main axis): 왼쪽 → 오른쪽 (수평 방향).
  • 교차 축(cross axis): 위 → 아래 (수직 방향).

✅ 메인 축(main axis): Flexbox 항목이 따라가는 주축이다. ✅ 교차 축(cross axis): 메인 축에 수직인 보조축이다.

---

🎯 flex-direction 속성

• row (기본값): 항목이 수평으로 나열된다 (메인 축: 수평, 교차 축: 수직).
• row-reverse: 수평 방향이지만 항목 순서가 반대로 나열된다.
• column: 항목이 수직으로 나열된다 (메인 축: 수직, 교차 축: 수평).
• column-reverse: 수직 방향이지만 항목 순서가 반대로 나열된다.

✅ 메인 축과 교차 축의 변화:

• flex-direction: row; → 메인 축: 수평 (왼쪽 → 오른쪽), 교차 축: 수직 (위 → 아래).
• flex-direction: column; → 메인 축: 수직 (위 → 아래), 교차 축: 수평 (왼쪽 → 오른쪽).

⚠️ 주의할 점: row-reverse와 column-reverse는 시각적으로 항목 순서를 반대로 보이게 하지만, HTML DOM 상의 요소 순서는 그대로 유지된다. 이는 스크린 리더나 접근성 측면에서 중요한 포인트이다.

---

🔍 flex-basis 속성

• 항목의 기본 크기를 지정한다 (메인 축 기준으로 적용).
  • flex-direction: row; → flex-basis = 너비.
  • flex-direction: column; → flex-basis = 높이.
• 중요 포인트: flex-basis는 자식 요소에만 적용된다 (부모 컨테이너에는 적용 안 됨).

💡 flex-basis vs width/height

• flex-basis는 Flexbox 컨텍스트에서 동작하며, width/height보다 우선 순위가 높다.
• flex-basis가 지정되면, 항목은 해당 크기를 기준으로 유연하게 늘어나거나 줄어든다.

✅ flex-basis 사용 예시:

.container > * {
    flex-basis: 100px;
}

⚠️ flex-basis: auto;는 항목의 너비 또는 높이를 콘텐츠 크기에 따라 자동으로 설정한다. width나 height를 지정했다면 그 값이 우선 적용된다.

---

🌈 실습 과제 1️⃣ .container의 flex-direction을 column으로 변경해 항목들을 위에서 아래로 배치한다. 2️⃣ 항목들이 100px의 높이를 가지도록 flex-basis를 사용한다.

✨ CSS 선택자 사용하기

• 모든 자식 요소 선택:

.container > * {
    flex-basis: 100px;
}

• > (자식 결합자): .container의 직계 자식 요소만 선택한다.
• * (전체 선택자): 모든 요소를 선택한다.

✅ 보너스: nth-child 사용해 특정 요소만 선택하기!

.container > :nth-child(2) {
    flex-basis: 200px;
}

---

💡 display: inline-flex

• Flexbox가 부모 요소의 전체 너비를 차지하지 않고, 내용의 너비만큼만 차지하도록 한다.
• display: flex; → 컨테이너가 전체 부모 요소 너비를 차지한다.
• display: inline-flex; → 컨테이너가 내용만큼의 너비를 차지한다.

✅ 예시:

.container {
    display: inline-flex;
    flex-direction: column;
}

---

🚀 심화 학습: flex-direction과 기타 속성 조합하기

✨ flex-grow, flex-shrink, flex-basis의 관계

• flex-grow: 남는 공간을 어떻게 나눌지 지정한다.
• flex-shrink: 부족한 공간에서 항목이 줄어드는 비율을 지정한다.
• flex-basis: 항목의 기본 크기를 지정한다.

✅ flex 단축 속성:

.container > * {
    flex: 1 1 100px; /* flex-grow, flex-shrink, flex-basis 순서 */
}

✨ justify-content & align-items

• justify-content: 메인 축에서 항목을 정렬한다.
• align-items: 교차 축에서 항목을 정렬한다.

✅ 예시:

.container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 방향에서 가운데 정렬 (메인 축) */
    align-items: center; /* 수평 방향에서 가운데 정렬 (교차 축) */
}

---

🔍 flex-wrap 속성

• 항목이 한 줄에 다 안 들어갈 때 줄바꿈 여부를 지정한다.
• nowrap (기본값): 줄바꿈 안 한다.
• wrap: 줄바꿈 한다.

✅ 예시:

.container {
    display: flex;
    flex-wrap: wrap;
}

⚠️ wrap-reverse: 줄바꿈 방향을 반대로 지정한다.

---

🚀 마무리 및 연습 포인트

• flex-direction과 flex-basis를 조합해 본다.
• inline-flex와 flex-basis 조합의 동작을 이해한다.
• justify-content, align-items, flex-wrap과 함께 사용해 다양한 레이아웃을 연습한다.
• 실전 프로젝트에서 다양한 Flexbox 패턴을 활용한다.

👉 Flexbox의 축 개념을 이해하면 다양한 레이아웃을 쉽게 만들 수 있다!