[CSS] Flexbox (1편: Container)

과거 웹 개발자들은 화면에 박스 3개를 나란히 가로로 배치하기 위해 피눈물을 흘렸습니다. float: left를 썼다가 부모의 높이가 찌그러지는 버그(Height Collapse)를 막기 위해 clearfix라는 흑마법 코드를 덧붙여야 했고, 수직 중앙 정렬(Vertical Center)을 맞추기 위해 line-height와 margin 값을 픽셀 단위로 찍어 맞추는 노가다를 반복했습니다. 브라우저 창 크기가 변하는 스마트폰 시대가 도래하자, 이 구시대적 해킹 레이아웃은 여지없이 와르르 무너져 내렸습니다. 전 세계 개발자들의 절규를 들은 W3C는 마침내 2009년 초안을 거쳐, 오로지 '레이아웃 배치'만을 목적으로 창조된 완벽하고 우아한 구세주를 세상에 내놓았습니다. 그것이 바로 CSS Flexible Box Layout Module, 줄여서 'Flexbox'입니다. Flexbox의 등장 이후, 수백 줄의 float와 픽셀 노가다 코드가 단 세 줄의 코드로 압축되는 마법이 일어났습니다. 오늘날 모든 프론트엔드 UI(네비게이션 바, 카드 리스트, 모달창 등)의 99%는 이 Flexbox를 기반으로 만들어집니다. 이번 10단계 포스팅에서는 Flexbox의 핵심 철학인 Main Axis(주축)와 Cross Axis(교차축)의 개념을 뇌에 각인시키고, 부모(Container)에게 내리는 정렬의 마법 주문들에 대해 상세히 알아보겠습니다.

1. 패러다임의 전환: 부모(Container)와 자식(Item)의 분업

Flexbox 레이아웃을 다루기 전에 반드시 명심해야 할 절대 규칙이 있습니다. Flexbox는 '부모 박스(Flex Container)'에게 내리는 명령과 '자식 박스(Flex Item)'에게 내리는 명령이 완전히 분리되어 있다는 점입니다. display: flex;라는 마법의 주문을 '부모 요소'에게 외우는 순간, 그 뱃속에 있는 직계 자식들은 기존의 멍청한 Block 성질을 잃어버리고 가로세로로 유연하게 늘어나는 고무줄(Flex Item)로 변신하게 됩니다.

이번 1편에서는 자식들의 배치 방향과 정렬 기준을 통제하는 '부모(Container) 전용 속성'들에 집중하겠습니다.

2. 레이아웃의 기준선: Main Axis(주축)와 Cross Axis(교차축)

수많은 초보 개발자들이 justify-content는 가로 정렬, align-items는 세로 정렬이라고 단순히 암기합니다. 그리고 나중에 축이 뒤틀렸을 때 멘탈이 붕괴됩니다. Flexbox는 가로/세로라는 고정된 개념이 없습니다. 오직 '주축(Main Axis)'과 '교차축(Cross Axis)'이라는 두 개의 가상 선만 존재할 뿐입니다.

축의 방향을 결정하는 자: flex-direction

부모 요소에 display: flex;를 주면, 기본적으로 flex-direction: row;가 생략되어 들어갑니다. 즉, 메인 주축이 왼쪽에서 오른쪽(가로)으로 형성됩니다. 이때 교차축은 위에서 아래(세로)가 됩니다.

하지만 flex-direction: column;으로 변경하는 순간 마법이 일어납니다. 메인 주축이 위에서 아래(세로)로 90도 꺾여버립니다! 자연히 교차축은 가로가 됩니다. 이 '주축의 방향'을 완벽히 이해해야만 아래에 나오는 정렬 속성들을 헷갈리지 않고 자유자재로 다룰 수 있습니다.

3. 메인 축(Main Axis)을 따라 정렬하라: justify-content

justify-content는 현재 메인 주축을 따라 자식 박스들을 어떻게 흩어놓을 것인가를 결정합니다. (기본 row 상태에서는 가로 정렬을 의미합니다.)

• flex-start (기본값): 아이템들을 주축의 시작점(왼쪽)으로 전부 다닥다닥 밀어붙입니다.
• flex-end: 아이템들을 주축의 끝점(오른쪽)으로 싹 다 밀어냅니다. (로그인, 회원가입 버튼을 우측 끝으로 몰아넣을 때 꿀팁!)
• center: 주축의 한가운데로 아이템들을 모읍니다. (가로 중앙 정렬의 구세주)
• space-between: 첫 번째 아이템은 맨 왼쪽, 마지막 아이템은 맨 오른쪽에 찰싹 붙이고, 나머지 중간 아이템들은 남은 여백을 아주 공평하게 똑같이 나누어 가집니다. [실무 99% 사용] 네비게이션 로고와 메뉴바를 양끝으로 쫙 찢어놓을 때 씁니다.
• space-around: 모든 아이템들의 좌우 양옆에 동일한 크기의 '개인 영역(여백)'을 둥글게 둘러쳐줍니다.

Flex 정렬의 마술사 - justify-content(space-between, space-around, center)를 통한 여백의 분배 방식과, align-items(center, stretch)를 이용해 픽셀 높낮이가 다른 자식 박스들의 오와 열을 세로로 완벽하게 맞춰내는 중앙 정렬의 궁극적 해법 비교도

 

4. 교차 축(Cross Axis)을 따라 정렬하라: align-items

align-items는 메인 주축과 90도로 직교하는 교차축을 따라 자식 박스들을 어떻게 오와 열을 맞출 것인가를 결정합니다. (기본 row 상태에서는 세로 정렬을 의미합니다.)

• stretch (기본값): 자식 요소에 높이(height) 값이 지정되어 있지 않다면, 부모의 높이만큼 위아래로 쭉쭉 늘어나서 꽉 채웁니다. 옛날에는 옆에 있는 박스 높이에 맞춰 내 박스 높이도 똑같이 늘리는 게 지옥이었지만, flex는 기본값이 stretch라 아무것도 안 해도 높이가 완벽히 똑같아집니다!
• center: 높이가 제각각인 텍스트와 이미지, 아이콘들을 세로 정중앙에 하나의 꼬치로 완벽하게 꿰어버립니다. margin-top 노가다를 역사의 뒤안길로 보내버린 프론트엔드 최고의 혁명 코드입니다.
• flex-start / flex-end: 아이템들을 교차축의 시작점(위)이나 끝점(아래)으로 정렬합니다.

💡 전설의 궁극기: 완벽한 정중앙 정렬

과거 웹 개발 면접의 단골 질문이었던 "화면 한가운데에 박스를 어떻게 띄우나요?"에 대한 현대 프론트엔드의 모범 답안은 단 3줄이면 끝납니다.

.container {
    display: flex;
    justify-content: center; /* 가로(주축) 중앙 정렬 */
    align-items: center;     /* 세로(교차축) 중앙 정렬 */
    height: 100vh;           /* 화면 전체 높이 확보 */
}

5. 줄 바꿈의 미학: flex-wrap

부모 박스는 좁은데 자식 박스가 10개나 들어온다면 어떻게 될까요? 기본적으로 Flexbox는 무자비합니다. 자식들이 찌그러지는 한이 있더라도 무조건 한 줄(nowrap)에 다 쑤셔 넣습니다. 하지만 쇼핑몰의 상품 리스트처럼 공간이 부족하면 자연스럽게 아래 줄로 떨어지게 만들고 싶다면 flex-wrap: wrap; 속성을 주면 됩니다. 이 속성 하나로 스마트폰(1줄), 태블릿(2줄), PC(4줄)로 자연스럽게 흐르는 반응형 갤러리 레이아웃이 완성됩니다.

정리하며

이번 10단계 포스팅에서는 구시대의 찌꺼기 float를 완벽하게 대체하고 레이아웃의 패러다임을 바꾼 Flexbox의 '부모(Container) 통제술'을 깊이 있게 살펴보았습니다. 주축(Main Axis)과 교차축(Cross Axis)의 흐름을 이해하고 justify-content와 align-items로 여백과 오와 열을 맞추는 법을 터득했다면, 당신은 이미 1차원 배치 레이아웃의 90%를 정복한 것입니다. 그런데, 정렬은 부모가 시키는 대로 다 했는데, "나는 옆에 있는 애들보다 두 배로 더 크게 늘어나고 싶어!", "나는 공간이 부족해도 절대 쪼그라들기 싫어!"라고 떼를 쓰는 개성 넘치는 자식(Item) 요소들이 있다면 어떻게 통제해야 할까요? 다음 11단계 포스팅에서는 고무줄처럼 늘어나고 줄어드는 "CSS Flexbox (2편): 자식(Item)의 반란, flex-grow와 shrink의 황금 비율"에 대해 상세히 파헤쳐 보겠습니다!