Flexbox ②

🎯 학습 목표

이 강을 마치면 여러분은 Flexbox 아이템들의 간격·줄바꿈·크기 배분을 다루어, 화면에 유연하게 적응하는 배치를 만들 수 있게 됩니다. 지난 강에서 아이템을 정렬하는 법을 배웠다면, 이번 강에서는 아이템들이 공간을 나눠 갖고 필요하면 줄을 바꾸는 더 실전적인 기능을 다룹니다. 이것으로 Flexbox의 핵심을 마무리합니다.

구체적으로는 세 가지를 배웁니다. 첫째, 아이템 사이 간격(gap)과 줄바꿈(flex-wrap)을 익힙니다. 둘째, 아이템이 공간을 채우고 줄어드는 flex 속성을 이해합니다. 셋째, 이를 활용한 실전 정렬 패턴을 살펴봅니다.

📏 아이템 사이 간격 — gap

이 섹션에서는 아이템들 사이에 간격을 주는 gap을 살펴보겠습니다.

여러 아이템을 나란히 놓으면 서로 딱 붙어 답답해 보일 때가 많습니다. 예전에는 각 아이템에 margin을 줘서 간격을 만들었는데, 첫 아이템이나 마지막 아이템의 여백까지 신경 써야 해 번거로웠습니다. 이 문제를 깔끔하게 해결하는 것이 gap 속성입니다. 컨테이너에 gap을 주면 아이템들 사이에만 일정한 간격이 생깁니다.

.container {
  display: flex;
  gap: 16px;
}

이 코드는 아이템들 사이사이에 16px의 간격을 줍니다. 양 끝에는 불필요한 여백이 생기지 않고 아이템 사이에만 간격이 적용되므로 매우 편리합니다. margin으로 일일이 조정하던 시절에 비하면 훨씬 간단합니다. gap은 사용법이 쉽고 결과가 깔끔해, 요즘 아이템 간격을 줄 때 가장 먼저 떠올리는 방법입니다.

🔄 줄바꿈 — flex-wrap

이 섹션에서는 아이템이 넘칠 때 줄을 바꾸는 flex-wrap을 살펴보겠습니다.

기본적으로 플렉스 아이템들은 한 줄에 억지로 다 들어가려 합니다. 그래서 아이템이 많거나 화면이 좁으면 아이템들이 찌그러져 버립니다. 이때 아이템들이 넘치면 다음 줄로 넘어가게 하려면 flex-wrap: wrap을 씁니다.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

기본값은 nowrap(줄바꿈 안 함)이고, wrap으로 바꾸면 한 줄에 다 못 들어가는 아이템은 자동으로 아래 줄로 내려갑니다. 이것은 여러 개의 카드나 상품을 나열할 때 특히 중요합니다. 화면이 넓으면 여러 개가 한 줄에, 좁으면 몇 개씩 여러 줄에 배치되어 화면 크기에 유연하게 적응하기 때문입니다. gap과 flex-wrap을 함께 쓰면, 간격이 일정하게 유지되면서 아이템들이 자연스럽게 줄을 바꾸는 카드 그리드를 손쉽게 만들 수 있습니다.

📐 공간 배분 — flex-grow와 flex

이 섹션에서는 Flexbox의 진짜 강력함, 즉 아이템이 남는 공간을 나눠 갖는 기능을 살펴보겠습니다.

플렉스 아이템은 컨테이너의 남는 공간을 어떻게 나눌지 정할 수 있습니다. 이를 담당하는 것이 flex-grow입니다. flex-grow는 '남는 공간을 얼마나 차지할지'의 비율을 나타냅니다. 기본값은 0(늘어나지 않음)입니다. 아이템에 flex-grow: 1을 주면, 그 아이템이 남는 공간을 채우며 늘어납니다.

실무에서는 보통 flex라는 축약 속성을 씁니다. flex: 1은 대략 '남는 공간을 균등하게 나눠 가져라'라는 뜻입니다.

.item {
  flex: 1;
}

세 개의 아이템에 모두 flex: 1을 주면, 세 아이템이 공간을 똑같이 3등분해 나란히 꽉 채웁니다. 화면 너비가 달라져도 항상 균등하게 나누므로, 같은 너비의 컬럼(단)을 만들 때 매우 유용합니다. 참고로 flex는 원래 세 값(grow·shrink·basis)을 합친 것으로, 각각 '늘어나는 정도·줄어드는 정도·기본 크기'를 뜻하지만, 입문 단계에서는 flex: 1로 균등 배분한다는 것만 익혀도 충분합니다.

🛠️ 실전 정렬 패턴

이 섹션에서는 지금까지 배운 것을 조합한 실전 패턴을 살펴보겠습니다.

첫째, 양쪽 끝 배치(헤더 패턴)입니다. 지난 강의 space-between을 쓰면, 로고는 왼쪽 끝에 메뉴는 오른쪽 끝에 두는 헤더를 만들 수 있습니다.

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

둘째, 균등 3단 배치입니다. 여러 카드에 flex: 1을 주면 화면을 똑같이 나눠 채웁니다.

.cards {
  display: flex;
  gap: 20px;
}
.cards > .card {
  flex: 1;
}

셋째, 반응형 카드 그리드입니다. flex-wrap: wrap과 gap을 함께 쓰면 화면 크기에 따라 카드가 자동으로 줄을 바꿉니다. 이렇게 지난 강의 정렬(justify·align)과 이번 강의 gap·wrap·flex를 조합하면, 대부분의 실무 배치를 만들 수 있습니다. Flexbox가 현대 웹 레이아웃의 핵심 도구로 불리는 이유입니다.

넷째, 사이드바 + 본문 배치입니다. 한쪽은 너비를 고정하고 다른 쪽이 나머지를 모두 채우게 하는, 아주 흔한 레이아웃입니다. 사이드바에는 고정 너비를 주고, 본문에는 flex: 1을 주면 됩니다.

.layout {
  display: flex;
  gap: 20px;
}
.sidebar {
  width: 200px;   /* 고정 너비 */
}
.content {
  flex: 1;        /* 남는 공간 모두 차지 */
}

이렇게 하면 사이드바는 항상 200px을 유지하고, 본문은 전체 너비에서 사이드바를 뺀 나머지 공간을 전부 채웁니다. 화면이 넓어지든 좁아지든 본문이 알아서 늘고 줄어드는 것입니다. 이처럼 고정 너비와 유연한 flex를 한 줄에 섞는 패턴은 실무에서 정말 자주 쓰이니 꼭 기억해 두세요.

⚠️ Flexbox를 다룰 때의 주의점

이 섹션에서는 흔한 실수를 정리하겠습니다.

첫 번째, flex-wrap을 잊고 아이템이 찌그러지는 것입니다. 아이템이 좁은 화면에서 찌부러진다면 flex-wrap: wrap을 안 준 경우가 많습니다. 여러 아이템을 나열할 때는 wrap을 함께 고려하세요.

두 번째, flex를 컨테이너에 주는 것입니다. flex: 1 같은 크기 배분 속성은 아이템(자식)에 줍니다. 반면 display:flex·gap·justify-content는 컨테이너(부모)에 줍니다. 어느 것을 어디에 주는지 구분하세요.

세 번째, gap 대신 margin으로 고생하는 것입니다. 아이템 간격은 gap으로 주는 것이 가장 깔끔합니다. 굳이 margin으로 복잡하게 만들 필요가 없습니다.

📝 핵심 요약

이번 강에서는 Flexbox의 유연한 배치를 배웠습니다.

• gap — 컨테이너에 주면 아이템 사이에만 일정한 간격이 생겨, margin보다 깔끔합니다.
• flex-wrap — wrap으로 바꾸면 넘치는 아이템이 다음 줄로 내려가, 화면 크기에 적응합니다.
• flex — 아이템에 flex: 1을 주면 남는 공간을 균등하게 나눠 채웁니다. 같은 너비의 단을 만들 때 유용합니다.
• 실전 패턴 — space-between 헤더, flex:1 균등 배치, wrap 카드 그리드 등을 조합해 대부분의 배치를 만듭니다.

이제 Flexbox로 한 줄(1차원) 배치를 자유롭게 다룰 수 있게 되었습니다. 다음 강에서는 가로와 세로를 동시에 다루는 2차원 레이아웃 도구인 Grid를 배워, 격자형 배치를 만드는 법을 익히겠습니다. 다음 강 「Grid 레이아웃」에서 이어가겠습니다.

📚 참고 자료

• flex 속성 — MDN Web Docs
• flex-wrap — MDN Web Docs
• gap — MDN Web Docs