CSS Flexbox 생성기: 플렉스 레이아웃을 시각적으로 구축하고 CSS 내보내기

Flexbox는 내비게이션 바, 버튼 그룹, 콘텐츠 중앙 정렬, 카드 행 등 1차원 레이아웃을 위한 필수 CSS 도구입니다. 하지만 어떤 속성이 컨테이너에, 어떤 것이 아이템에 적용되는지, 그리고 원하는 간격을 만들기 위해 어떤 값을 설정해야 하는지 익히는 데는 연습이 필요합니다. CSS Flexbox 생성기를 사용하면 플렉스 속성을 시각적으로 구성하고 바로 사용 가능한 CSS를 복사할 수 있습니다.

CSS Flexbox 생성기 사용해보기 →

Flexbox 동작 원리

Flexbox는 컨테이너를 플렉스 서식 컨텍스트로 변환합니다. 해당 컨테이너의 자식 요소들이 플렉스 아이템이 되어 주 축(기본값: 수평)을 따라 배치됩니다.

.container {
  display: flex;
}

이 한 줄로 시작할 수 있습니다 — 아이템들이 이제 수평으로 나란히 배치됩니다. 나머지는 모두 설정입니다.

컨테이너 속성

이 속성들은 플렉스 컨테이너(부모 요소)에 적용합니다.

`flex-direction`

주 축 방향을 설정합니다:

flex-direction: row;            /* 기본값: 왼쪽에서 오른쪽 */
flex-direction: row-reverse;    /* 오른쪽에서 왼쪽 */
flex-direction: column;         /* 위에서 아래 */
flex-direction: column-reverse; /* 아래에서 위 */

flex-direction: column일 때 주 축이 수직으로 흐릅니다. 그에 따라 justify-content와 align-items의 시각적 효과가 서로 바뀝니다.

`justify-content`

주 축을 따라 아이템을 분배합니다:

값	효과
`flex-start`	시작 부분에 모음 (기본값)
`flex-end`	끝 부분에 모음
`center`	가운데 정렬
`space-between`	첫/마지막 아이템을 끝에, 사이에 균등 간격
`space-around`	각 아이템 주위에 균등 공간 (끝은 절반)
`space-evenly`	끝 포함 모든 아이템 사이에 균등 공간

`align-items`

교차 축(주 축에 수직)을 따라 아이템을 정렬합니다:

값	효과
`stretch`	컨테이너 높이에 맞게 늘림 (기본값)
`flex-start`	교차 축 시작에 정렬
`flex-end`	교차 축 끝에 정렬
`center`	교차 축 중앙에 정렬
`baseline`	텍스트 기준선으로 정렬

`flex-wrap`

아이템이 넘칠 때 줄 바꿈을 제어합니다:

flex-wrap: nowrap;        /* 기본값: 한 줄, 넘칠 수 있음 */
flex-wrap: wrap;          /* 필요 시 다음 줄로 줄 바꿈 */
flex-wrap: wrap-reverse;  /* 이전 줄로 줄 바꿈 */

여러 아이템을 포함하는 반응형 레이아웃에서 flex-wrap: wrap과 아이템의 flex-basis 또는 min-width를 함께 사용하는 것이 일반적인 패턴입니다.

`gap`

외부 마진에 영향을 주지 않고 플렉스 아이템 사이에 공간을 추가합니다:

gap: 1rem;           /* 양방향 동일 간격 */
gap: 1rem 2rem;      /* row-gap column-gap */

gap은 아이템 사이에만 적용되며, 아이템과 컨테이너 가장자리 사이에는 적용되지 않습니다. 외부 간격에는 컨테이너의 padding을 사용하세요.

`align-content`

아이템이 여러 줄로 줄 바꿈될 때, align-content는 교차 축을 따라 줄을 분배합니다(justify-content가 아이템을 분배하는 방식과 유사):

align-content: flex-start;
align-content: center;
align-content: space-between;
align-content: stretch; /* 기본값 */

align-content는 아이템이 한 줄뿐일 때는 효과가 없습니다.

아이템 속성

이 속성들은 플렉스 아이템(자식 요소)에 적용합니다.

`flex-grow`

여분의 공간이 있을 때 다른 아이템에 비해 얼마나 더 커지는지 결정합니다:

.item-a { flex-grow: 1; }  /* 여분 공간의 1부분 차지 */
.item-b { flex-grow: 2; }  /* 2부분 차지 — item-a의 두 배 */
.item-c { flex-grow: 0; }  /* 커지지 않음 (기본값) */

`flex-shrink`

공간이 부족할 때 다른 아이템에 비해 얼마나 줄어드는지 결정합니다:

flex-shrink: 1;  /* 기본값: 비율에 따라 줄어듦 */
flex-shrink: 0;  /* 줄어들지 않음 */

flex-shrink: 0을 설정하면 아이템이 찌그러지지 않습니다 — 아이콘, 아바타, 플렉스 행의 고정 너비 요소에 유용합니다.

`flex-basis`

플렉스 확장/축소가 적용되기 전 아이템의 초기 크기를 설정합니다:

flex-basis: auto;    /* width/height 속성에 따른 크기 */
flex-basis: 0;       /* 0에서 시작해 확장 */
flex-basis: 200px;   /* 200px에서 시작 */
flex-basis: 25%;     /* 컨테이너의 25%에서 시작 */

`flex` 단축 속성

flex는 flex-grow, flex-shrink, flex-basis를 합칩니다:

flex: 1;            /* flex: 1 1 0 — 확장, 축소, 기준 0 */
flex: auto;         /* flex: 1 1 auto */
flex: none;         /* flex: 0 0 auto — 고정, 확장도 축소도 안 함 */
flex: 0 1 200px;    /* 확장 안 함, 축소 가능, 200px에서 시작 */

가장 일반적인 값은 flex: 1(균등 분배)과 flex: none(고정 크기)입니다.

`align-self`

특정 아이템에서 align-items를 재정의합니다:

.item-special {
  align-self: flex-end; /* 이 아이템만 끝에 정렬; 나머지는 align-items를 따름 */
}

`order`

DOM 순서를 변경하지 않고 시각적 순서를 바꿉니다:

.item-first { order: -1; } /* order: 0인 아이템보다 앞에 나타남 */
.item-last  { order: 1;  } /* order: 0인 아이템보다 뒤에 나타남 */

모든 아이템의 기본 order는 0입니다.

일반적인 Flexbox 패턴

중앙 정렬 (양쪽 축)

가장 많이 검색되는 Flexbox 사용 사례:

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

내비게이션 바

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
}

.navbar .logo {
  flex: none;          /* 로고는 확장도 축소도 안 함 */
  margin-right: auto;  /* 나머지 아이템을 오른쪽으로 밀기 */
}

스티키 푸터

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* 메인 콘텐츠가 사용 가능한 모든 공간 차지 */
}

footer {
  flex: none; /* 푸터는 자연스러운 크기 유지 */
}

동일 너비 컬럼

.columns {
  display: flex;
  gap: 1rem;
}

.column {
  flex: 1; /* 모든 컬럼이 공간을 균등하게 공유 */
}

줄 바꿈 카드 행

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px; /* 확장과 축소 가능, 280px에서 시작 */
  min-width: 0;    /* 내부 텍스트 잘림 허용 */
}

미디어 오브젝트 (아이콘 + 텍스트)

댓글, 알림, 목록 아이템의 고전적인 패턴:

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.media-icon {
  flex: none;      /* 아이콘은 고정 크기 */
  width: 40px;
  height: 40px;
}

.media-body {
  flex: 1;         /* 텍스트가 나머지 공간 차지 */
  min-width: 0;    /* 오버플로 방지 */
}

Flexbox vs Grid

두 레이아웃 시스템은 서로를 보완합니다:

사용 사례	Flexbox	Grid
내비게이션 바	✓	—
단일 아이템 중앙 정렬	✓	—
카드 그리드 (동일 크기)	—	✓
페이지 레이아웃 (행 + 열)	—	✓
행 내 아이템 정렬	✓	—
복잡한 겹침 레이아웃	—	✓
줄 바꿈 아이템 목록	✓	✓

실제로 대부분의 프로젝트는 두 가지를 모두 사용합니다: 페이지 구조에는 Grid, 컴포넌트 내부에는 Flexbox.

Flexbox 디버깅

Chrome, Firefox, Edge 모두 DevTools에 Flexbox 인스펙터가 내장되어 있습니다. Elements 패널에서 플렉스 컨테이너 옆의 flex 배지를 클릭하면 페이지에 플렉스 라인과 정렬 가이드가 오버레이됩니다.

오버레이는 주 축 방향, 여분 공간 분배, 어떤 아이템이 확장/축소됐는지를 보여줍니다.

CSS Flexbox 생성기 활용하기

레이아웃에 맞는 justify-content, align-items, flex-wrap, gap 값의 조합을 선택하려면 다양한 옵션을 시도해봐야 합니다. CSS Flexbox 생성기는 시각적 플레이그라운드를 제공합니다:

버튼으로 모든 컨테이너와 아이템 속성 전환
라이브 레이아웃 미리보기 즉시 업데이트
컨테이너와 아이템의 완성된 CSS 복사
아이템 수, flex-grow/shrink 값, flex-basis 조정

CSS Flexbox 생성기 사용해보기 →

Flexbox 동작 원리

컨테이너 속성

flex-direction

justify-content

align-items

flex-wrap

gap

align-content