Flexbox, 2012년 출시, 1차원 레이아웃의 해방

한 줄로

CSS의 display: flex. 가로 또는 세로 한 방향으로 요소를 배치하는 레이아웃 시스템입니다. 2012년 등장으로 float 트릭을 종말시켰습니다.

어디서 왔나

W3C가 2009년부터 작업을 시작했습니다. 2012년에 첫 안정 버전, 2015년경 모든 모던 브라우저에서 지원됐습니다.

이전 시대의 레이아웃 문제입니다.

수직 가운데 정렬: 거의 불가능. 수많은 트릭 (vertical-align, table-cell 흉내, transform).

동일 높이의 컬럼: 트릭이 필요했습니다.

공간 분배: 수작업 계산.

Flexbox는 이 모든 걸 단 몇 줄로 해결했습니다.

.container { display: flex; justify-content: center; align-items: center; }

이 두 줄로 자식 요소가 컨테이너의 정중앙에 옵니다. 이전에는 5~10줄의 CSS가 필요했습니다.

핵심 속성

컨테이너 (부모)

flex-direction: row 또는 column.

justify-content: 주 축 정렬.

align-items: 교차 축 정렬.

flex-wrap: 줄바꿈 허용.

gap: 자식 사이 간격.

아이템 (자식)

flex: 줄임형으로 flex-grow, flex-shrink, flex-basis 동시 설정.

align-self: 개별 정렬 재정의.

order: 순서 변경.

Grid와의 차이

Flexbox: 1차원 (한 방향).

Grid: 2차원 (행 + 열 동시).

복잡한 페이지 골격은 Grid, 메뉴, 툴바, 카드 내부는 Flexbox가 자연스럽습니다.

흔한 사용처

네비게이션 바: 로고 왼쪽, 메뉴 오른쪽.

카드 내부: 이미지 위, 텍스트 아래.

버튼 그룹: 가로로 나열.

푸터의 컬럼: 동일 너비 컬럼.

Tailwind에서

Tailwind는 Flexbox 유틸리티가 가장 풍부합니다.

<div class="flex justify-between items-center gap-4"> <div>왼쪽</div> <div>오른쪽</div> </div>

이 한 줄로 양쪽 정렬 + 세로 가운데 + 16px 간격입니다.

바이브 메이커가 챙길 한 가지

Flexbox는 거의 모든 컴포넌트 내부 레이아웃의 기본입니다. 처음 배울 때 헷갈리는 건 justify-content(주 축)와 align-items(교차 축)의 구분입니다. flex-direction이 row면 justify는 가로, align은 세로입니다. column이면 반대입니다. 이 한 가지만 익히면 90%가 풀립니다.

관련

CSS Grid · Responsive design · Tailwind