CSS 레이아웃 — Flex & Grid 정리

display: flex (플렉스박스)

플렉스박스는 요소를 유연하게 배치하기 위한 레이아웃 방식.

기본 상태

• 메인축: 가로 방향 (좌 → 우), 아이템이 나열되는 방향

• 수직축: 세로 방향 (상 → 하), 메인축의 직각 방향

• 아이템 너비: 내용물만큼 (auto)

• 아이템 높이: 부모 요소만큼 (100%)

주요 속성

• flex-direction — 메인축(아이템 나열) 방향 지정

• row: 가로 방향 (기본값)

• column: 세로 방향

• row-reverse / column-reverse: 역방향

• flex-wrap — 자동 줄바꿈

• nowrap: 줄바꿈 없음 (기본값)

• wrap: 줄바꿈

• wrap-reverse: 역방향 줄바꿈

• justify-content — 메인축 방향 아이템 정렬

• flex-start / flex-end / center

• space-around: 아이템 양쪽에 균등 여백

• space-between: 아이템 사이에만 균등 여백

• space-evenly: 모든 간격 균등

• align-items — 수직축 방향 아이템 정렬

• stretch: 부모 높이만큼 늘림 (기본값)

• flex-start / flex-end / center

수직 가운데 정렬 방법들

padding	padding-top + box-sizing: border-box	고정 여백
line-height	line-height: 300px	한 줄 텍스트만
table (CSS2)	display: table-cell + vertical-align: middle	구식 방법
flex (CSS3)	justify-content: center + align-items: center	권장

그리드

그리드는 행(row)과 열(column) 기반의 2차원 레이아웃 방식.

/* 2행 3열 고정 크기 */
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 100px);

/* fr 단위 — 비율로 분할 */
grid-template-columns: 1fr 1fr 1fr;  /* 3등분 */
grid-template-rows: 2fr 1fr;          /* 2:1 비율 */

/* 혼합 사용 */
grid-template-columns: 120px repeat(3, 1fr) 2fr 10%;
셀 병합

css
/* 풀어쓰기 */
grid-column-start: 1;
grid-column-end: 3;   /* 가로 2칸 병합 */
grid-row-start: 1;
grid-row-end: 3;      /* 세로 2칸 병합 */

/* 단축 표기 */
grid-column: 1 / 3;
grid-row: 1 / 3;

/* span — 현재 위치에서 N칸 병합 */
grid-column-end: span 2;  /* 가로 2칸 */
grid-row-end: span 5;     /* 세로 5칸 */
nth-child 패턴

css
/* 5개씩 반복 색상 지정 */
:nth-child(5n+1)  /* 1, 6, 11... */
:nth-child(5n+2)  /* 2, 7, 12... */

flex vs grid 비교

	flex	grid
차원	1차원 (행 또는 열)	2차원 (행 + 열)
용도	네비게이션, 버튼 정렬	전체 페이지 레이아웃
기준	콘텐츠 기준	레이아웃 기준