🧩 06. Flexbox: '1차원 레이아웃의 마법사'

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 10분(전체) / 핵심 파트만: 5분

🗺️ 이 문서의 흐름
[축(Axis)의 이해] → [정렬(Alignment) 마스터] → [flex-basis/grow/shrink의 수학]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 주축(Main Axis)과 교차축(Cross Axis)의 개념을 완벽히 파악합니다.
• 요소를 가로/세로 중앙에 정렬하는 가장 우아한 방법을 익힙니다.
• flex 단축 속성이 내부적으로 어떻게 공간을 배분하는지 이해합니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 (초반을 지나온 단계): "영호 님, 메뉴 바를 float과 position으로 맞추다 보니 1px 차이로 줄바꿈이 달라집니다. 수직 중앙 정렬도 코드가 너무 복잡해졌고요."
• 🦁 영호 (리드): "이제 Flexbox를 쓸 차례예요. 핵심은 속성 암기가 아니라 주축과 교차축을 먼저 정하는 겁니다. 축 하나만 제대로 잡으면 정렬 코드가 훨씬 짧아집니다."

🤔 왜 알아야 하는가

Flexbox가 등장하기 전까지 웹 레이아웃은 본래 목적과 다른 속성을 조합해 해결하는 경우가 많았습니다. 사진 옆에 텍스트를 나란히 두려고 float을 쓰고 clearfix로 흐름을 정리해야 했죠. 특히 수직 중앙 정렬은 코드가 장황해지기 쉬운 문제였습니다.

Flexbox는 요소들을 한 방향(가로 혹은 세로)으로 정렬하고, 남는 공간을 어떻게 나눠 가질지 결정하는 가장 강력하고 직관적인 도구입니다. 5년차 개발자는 단순히 display: flex를 남발하는 게 아니라, 아이템들이 '유연하게(Flex)' 반응하는 원리를 조절해 어떤 화면 크기에서도 깨지지 않는 레이아웃을 설계합니다.

🏗️ 1. 두 개의 축(Axis): 명중의 시작

Flexbox의 모든 것은 축(Axis) 에서 시작됩니다.

1. Main Axis (주축): flex-direction에 결정됩니다. 기본값 row일 때는 가로, column일 때는 세로가 됩니다.
2. Cross Axis (교차축): 주축과 직교하는 축입니다.

🦁 영호의 핵심 레슨:
"justify-content는 주축 방향의 정렬을, align-items는 교차축 방향의 정렬을 담당합니다. 이 두 줄만 있으면 전설의 '가로세로 중앙 정렬'이 완성되죠."

영철이가 메뉴 항목을 가운데 놓고 싶다면 먼저 방향을 확인해야 합니다. row가 기본값이므로 아래 코드에서는 가로가 주축, 세로가 교차축입니다.

.container {
  display: flex;
  /* 주축(row 기본값에서는 가로) 가운데 정렬 */
  justify-content: center;
  /* 교차축(row 기본값에서는 세로) 가운데 정렬 */
  align-items: center;
}

flex-direction: column으로 바꾸면 두 속성이 맡는 방향도 바뀝니다. 그래서 Flexbox 디버깅의 첫 질문은 항상 "지금 주축이 어느 방향인가?"입니다.

📏 2. flex-basis, grow, shrink: 공간 배분의 수학

아이템들이 남는 공간을 어떻게 나눠 가질지 결정하는 3형제입니다.

• flex-basis: 아이템의 기본 크기입니다. (width와 비슷하지만 축 방향에 따라 다름)
• flex-grow: 남는 공간을 비례해서 가져가는 비율입니다. (기본값 0: 안 가져감)
• flex-shrink: 공간이 부족할 때 비례해서 줄어드는 비율입니다. (기본값 1: 똑같이 줄어듬)

스터디 카드 목록처럼 아이템이 남는 공간을 나눠 가져야 한다면 flex 단축 속성의 세 값을 함께 읽어야 합니다.

.nav-item {
  /* flex-grow, flex-shrink, flex-basis 순서입니다. */
  flex: 1 1 200px;
}

⚠️ 5년차의 경고:
flex: 1은 사실 flex: 1 1 0%의 줄임말입니다. 반면 flex: auto는 flex: 1 1 auto죠. 이 미묘한 차이가 레이아웃이 꽉 차느냐, 콘텐츠 크기만큼만 커지느냐를 결정합니다.

🛠️ 3. gap: 마지막 아이템 예외 처리 줄이기

과거에는 아이템 사이 간격을 주려고 margin-right를 주고 마지막 아이템만 last-child로 빼곤 했습니다. 이제는 gap 속성으로 컨테이너가 간격을 관리하게 만들 수 있습니다.

.container {
  display: flex;
  /* 아이템 자체가 아니라 컨테이너가 간격 정책을 소유합니다. */
  gap: 20px;
}

📝 마무리 퀴즈

Q1. flex-direction: column;일 때 요소들을 수직 방향(위에서 아래)의 한가운데에 놓으려면 어떤 속성을 써야 할까요?

✅ 정답: justify-content: center;

💡 상세 해설:

• 원리: justify-content는 언제나 주축(Main Axis) 방향의 정렬을 담당합니다. flex-direction: column일 때는 세로가 주축이 되므로, justify-content: center를 써야 수직 중앙 정렬이 됩니다.
• 오답 피드백: "영철 님, 주축이 바뀌면 속성의 역할도 바뀐다는 걸 꼭 기억하세요. 헷갈린다면 '주선택(Justify-Main)'이라고 외워보세요!"

Q2. flex-shrink: 0; 속성이 부여된 아이템은 컨테이너 공간이 부족할 때 어떻게 반응할까요?

1. 컨테이너 크기에 맞춰 줄어든다.
2. 절대 줄어들지 않고 자기 크기를 유지하며 삐져나온다.
3. 다음 줄로 자동으로 넘어간다.
4. 사라진다.

✅ 정답: 2. 절대 줄어들지 않고 자기 크기를 유지하며 삐져나온다.

💡 상세 해설:

• 원리: flex-shrink는 공간이 부족할 때 아이템이 얼마나 줄어들지를 결정하는 비율입니다. 0으로 설정하면 기본 크기를 유지하려고 하며, 컨테이너가 충분히 좁으면 넘침이 생길 수 있습니다.
• 오답 피드백: "영철 님, 내용물이 잘리면 안 되는 중요한 아이콘이나 버튼에는 flex-shrink: 0을 줄 수 있어요. 대신 작은 화면에서 넘치지 않는지 함께 확인해야 합니다."

Q3. [영철이의 테스트 타임: 실무 딜레마]
영철이가 카드 리스트를 만들었는데, 마지막 줄의 카드 하나가 혼자서 컨테이너 전체 너비를 차지하며 뚱뚱하게 늘어나 버렸습니다. 영숙 디자이너 님이 "마지막 카드도 다른 카드랑 똑같은 크기여야 해요!"라고 하시네요. 영철이가 flex 속성을 이용해 이 문제를 해결하려면 어떻게 설정해야 할까요?

✅ 정답: flex-grow: 0 (또는 flex: none)을 주어 확장을 막고, flex-basis나 width로 고정 크기를 지정한다.

💡 상세 해설:

• 문제 진단: flex-grow: 1은 "가능한 모든 빈 공간을 채워라"라는 강력한 명령입니다. 여러 줄로 나열된 카드 리스트에서 마지막 줄에 아이템이 하나만 남으면, 그 아이템이 해당 줄의 모든 여백을 차지해 카드 크기가 달라질 수 있습니다.
• 해결 방안 (실무 핵심):
  1. 절제형 (Flex-grow: 0): 아이템에 flex-grow: 0을 주어 무분별한 확장을 막습니다. 대신 flex-basis: calc(50% - gap)이나 width로 명확한 자기 자리를 지정해줘야 합니다.
  2. 건축형 (Grid): 애초에 이런 격자형 레이아웃은 07강에서 배울 CSS Grid를 쓰는 것이 가장 완벽한 해결책입니다. (Grid는 줄이 바뀌어도 각 칸의 크기를 일정하게 유지하니까요!)

• 오답 피드백: "영철 님, flex: 1은 모든 레이아웃의 기본값이 아니에요. 여러 줄 카드 목록에서는 공간을 나눠 갖지 않도록 flex-grow를 0으로 두거나 Grid를 검토하세요."
• 📌 핵심 기억법: "한 줄 정렬은 Flex, 행과 열이 모두 중요하면 Grid도 후보에 올린다."

🐣 영철이의 퇴근 일기

오늘 float을 버리고 Flexbox의 세계에 입성했다.
수직 중앙 정렬이 단 두 줄 만에 끝나는 걸 보고 내 지난 밤샘이 허망하게 느껴졌지만, 이제라도 알았으니 다행이다.
특히 flex-grow랑 flex-shrink가 내부적으로 수학 계산을 하고 있다는 게 정말 신기했다.

💡 "정렬은 주관이 아니라 축(Axis)에 의한 물리적인 배치다. 축을 지배하는 자가 레이아웃을 지배한다."

영호 님이 "단순히 외우지 말고 공간이 어떻게 남고 모자라는지를 설명해보라"라고 하셨다. 내일부터는 display: flex를 먼저 쓰기 전에 이 레이아웃이 한 방향 문제인지, 아니면 행과 열이 함께 중요한 문제인지부터 판단해봐야겠다.

🔗 더 알아보기

• MDN: Flexbox 가이드
• Flexbox Froggy (게임으로 배우기)