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

📌 이 문서를 읽기 전에

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

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

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

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

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

• 🐣 영철 ( 신입 ): "영호 님! float이랑 position으로 메뉴 바 만드느라 밤을 샜는데, 딱 1px 차이로 자꾸 줄이 바뀌어요. 그리고 수직 중앙 정렬은 왜 이렇게 힘든 거죠? 😭"
• 🦁 영호 ( 리드 ): "영철 님, 아직도 10년 전 방식인 float과 싸우고 계시군요. 이제 '유연한 상자(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는 교차축 방향의 정렬을 담당합니다. 이 두 줄만 있으면 전설의 '가로세로 중앙 정렬'이 완성되죠."

.container {
  display: flex;
  justify-content: center; /* 가로(주축) 중앙 */
  align-items: center;    /* 세로(교차축) 중앙 */
}

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

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

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

/* 🐣 영철이의 황금 비율 메뉴 */
.nav-item {
  flex: 1 1 200px; /* grow: 1, shrink: 1, basis: 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; /* 아이템 사이 간격만 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은 마법의 주문이 아니에요. 상황에 따라 공간을 나눠 갖지 않도록 0으로 잠그는 법도 배워야 합니다. 특히 여러 줄 레이아웃에서 flex-grow는 양날의 검이니 조심해서 휘둘러야 해요!"
• 📌 핵심 기억법: "남 주긴 아깝고 나만 커긴 싫을 땐? flex-grow: 0으로 욕심을 버리고 정량을 지키자!"

🐣 영철이의 퇴근 일기

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

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

영호 님이 "단순히 외우지 말고 공간이 어떻게 남고 모자라는지를 느껴봐라"라고 하셨는데, 집에 가는 지하철 좌석도 Flexbox로 보이기 시작했다. 저 아저씨가 앉으면서 내 공간이 'shrink' 되고 있네... 내일은 2차원 마법사 Grid를 배운다는데 벌써 기대된다. 🧩

🔗 더 알아보기

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