01 · Concept

Flexbox vs Grid

CSS의 두 가지 핵심 레이아웃 시스템인 Flexbox(1차원)와 Grid(2차원)를 비교합니다.

Flexbox는 행 또는 열 한 방향으로 아이템을 배치하는 1차원 레이아웃 시스템이고, Grid는 행과 열을 동시에 제어하는 2차원 레이아웃 시스템입니다. 각 속성을 조절하며 레이아웃 변화를 실시간으로 확인해보세요.

02 · Interactive Demo

레이아웃 속성 비교

Flexbox와 Grid 탭을 전환하고 속성을 조절하여 레이아웃 변화를 확인하세요.

Preview
A
B
C
D
E
F
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
속성 조절
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

/* 가운데 정렬 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 네비게이션 바 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

/* 카드 레이아웃 */
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;  /* grow shrink basis */
  /* 최소 300px, 남은 공간 균등 분배 */
}
04 · Interview Point

면접 핵심 질문

Flexbox는 1차원 레이아웃 시스템으로, 행 또는 열 한 방향으로 아이템을 배치합니다. Grid는 2차원 레이아웃 시스템으로, 행과 열을 동시에 제어합니다. Flexbox는 콘텐츠 기반(아이템 크기에 따라 유동적), Grid는 레이아웃 기반(미리 정의된 그리드 구조)입니다. 일반적으로 컴포넌트 내부 정렬은 Flexbox, 페이지 레이아웃은 Grid를 사용합니다.
flex-basis는 아이템의 초기 크기를 설정합니다 (width/height 대신 사용). flex-grow는 남은 공간을 아이템 간에 분배하는 비율입니다 (0이면 확장 안 함). flex-shrink는 공간이 부족할 때 축소되는 비율입니다 (0이면 축소 안 함). 축약형: flex: grow shrink basis (예: flex: 1 1 300px).
Flexbox 사용: 네비게이션 바, 버튼 그룹, 카드 내부 정렬, 아이콘+텍스트 정렬 등 1차원 배치가 필요할 때. Grid 사용: 페이지 전체 레이아웃, 대시보드, 갤러리 등 2차원 배치가 필요할 때. 실무에서는 둘을 함께 사용합니다 — Grid로 큰 레이아웃을 잡고, 각 영역 내부는 Flexbox로 정렬합니다.