Flexbox의 핵심 개념을 '이미지'로 떠올리기

 

Flexbox 개념을 시각화하고 단계적으로 적용하는 방법

---

1. Flexbox의 핵심 개념을 '이미지'로 떠올리기

• 플렉스 컨테이너 (부모 요소):
  display: flex;을 설정하면 자식 요소들이 가로/세로로 정렬되는 '그릇'이라고 생각하세요.
  • flex-direction: row | column; → 가로/세로 방향 결정 (기본값: row).
  • justify-content: center | space-between; → 주축 방향 정렬 (가로축이면 왼쪽/오른쪽, 세로축이면 위/아래).
  • align-items: center | flex-start; → 교차축 방향 정렬 (가로축이면 위/아래, 세로축이면 왼쪽/오른쪽).
• 플렉스 아이템 (자식 요소):
  각 아이템은 유연하게 크기가 조절됩니다.
  • flex-grow: 1; → 빈 공간을 나눠 가짐 (숫자가 클수록 더 많이 차지).
  • flex-shrink: 1; → 공간이 부족할 때 줄어드는 정도.
  • flex-basis: 200px; → 아이템의 기본 크기 (컨텐츠 크기 + padding).

---

2. 실제 레이아웃 예시로 연습하기

예제 1: 가로로 균등하게 배치

.container {
  display: flex;
  justify-content: space-between; /* 주축(가로) 방향으로 균등 배치 */
  align-items: center; /* 교차축(세로) 방향 중앙 정렬 */
}
.item {
  flex: 1; /* flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 */
}

• 머릿속 이미지:
  
  (가로축을 따라 아이템들이 균등하게 펼쳐지고, 세로축은 중앙에 정렬)

예제 2: 세로로 쌓이고 중앙 정렬

.container {
  display: flex;
  flex-direction: column; /* 세로 방향 */
  justify-content: center; /* 주축(세로) 방향 중앙 */
  height: 100vh; /* 컨테이너 높이를 화면 전체로 */
}

---

3. 오류 발생 시 체크리스트 

1. 부모 요소에 display: flex;이 선언되었는지 확인.
2. 아이템들이 예상대로 움직이지 않으면 flex-direction을 점검 (row인지 column인지).
3. 정렬 프로퍼티 (justify-content, align-items)의 축 방향을 혼동하지 마세요.
   • 주축 (main axis): flex-direction에 따라 가로/세로.
   • 교차축 (cross axis): 주축의 반대 방향.
4. 아이템의 flex-grow/flex-shrink 값을 비교 (숫자가 클수록 더 많은 공간 차지).

---

4. 직관적 학습법

• 실제 코드로 실험하기:
  Codepen에서 Flexbox Playground을 검색해 자유롭게 변수를 조절해보세요.
  • justify-content의 flex-start, center, space-around 등을 바꿔가며 차이점을 직관적으로 확인.
• 그림으로 복습:
  CSS-Tricks Flexbox Guide의 시각적 설명을 참고하세요.

---

5. 단계별 문제 해결 전략

1. 목표 레이아웃 그리기:
   원하는 최종 디자인을 종이에 스케치하고, 주축과 교차축을 표시.
2. 부모 컨테이너 설정:
   display: flex; + flex-direction 결정.
3. 정렬 프로퍼티 적용:
   주축과 교차축 방향을 각각 justify-content, align-items로 제어.
4. 아이템 조정:
   flex-grow, order 등을 사용해 세부적인 위치 변경.

---

6. 주의해야 할 함정

• 중첩된 Flex 컨테이너:
  안쪽 컨테이너의 flex-direction이 바깥쪽과 충돌하지 않는지 확인.
• 높이/너비의 기본값:
  Flex 아이템은 기본적으로 flex-basis: auto (컨텐츠 크기 기반)이므로, 정확한 크기를 원하면 flex-basis: 0으로 설정.

---

마인드셋 팁: Flexbox는 부모-자식 관계에서 작동합니다. 부모 컨테이너가 모든 아이템을 통제하는 '지휘자'라고 생각하세요.