CSS 플렉스박스란 무엇인가요?

CSS Flexbox(유연한 박스 레이아웃)는 요소를 행이나 열로 배치할 수 있는 1차원 레이아웃 모델입니다. 컨테이너 내에서 항목이 늘어나고, 줄어들고, 정렬되는 방식을 제어할 수 있어 float이나 절대 위치 지정 없이 반응형 레이아웃을 훨씬 쉽게 만들 수 있습니다.

justify-content와 align-items의 차이는 무엇인가요?

justify-content는 주 축(flex-direction이 row일 때는 수평, column일 때는 수직)을 따른 정렬을 제어하고, align-items는 교차 축(수직 방향)을 따른 정렬을 제어합니다. 예를 들어 justify-content: center는 항목을 수평으로 가운데 정렬하고, align-items: center는 수직으로 가운데 정렬합니다.

flex-wrap은 언제 사용해야 하나요?

모든 항목이 컨테이너에 맞지 않을 때 넘쳐흐르는 대신 다음 줄로 이동하게 하려면 flex-wrap: wrap을 사용하세요. 작은 화면에서 콘텐츠가 재배치되어야 하는 반응형 디자인에 필수적입니다. flex-wrap: nowrap(기본값)은 모든 항목을 한 줄에 강제로 배치합니다.

align-content는 무엇을 하나요?

align-content는 여러 행의 플렉스 항목이 교차 축을 따라 분배되는 방식을 제어합니다 — flex-wrap이 wrap으로 설정되어 있고 여러 줄의 항목이 있을 때만 효과가 있습니다. 모든 항목이 한 줄에 들어가면 align-content는 시각적 효과가 없습니다.

Flexbox에서 gap 속성은 어떻게 작동하나요?

gap 속성(이전에는 grid-gap)은 플렉스 항목 사이의 간격을 설정합니다. row-gap과 column-gap의 단축 표기입니다. 마진과 달리 gap은 컨테이너의 외부 가장자리에 공간을 추가하지 않고 항목 사이에만 적용됩니다. 모든 최신 브라우저에서 지원됩니다.

CSS 플렉스박스 생성기

CSS 플렉스박스 레이아웃을 시각적으로 설계하고 생성된 CSS 코드를 복사하세요.

컨테이너 속성

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

4 항목

미리보기

Item 1

Item 2

Item 3

Item 4

생성된 CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

사용 방법

CSS 플렉스박스 레이아웃을 시각적으로 설계하고 생성된 CSS 코드를 복사하세요.

1컨테이너 속성을 조정하세요: flex-direction, flex-wrap, justify-content, align-items, align-content, gap을 선택하세요.
2각 속성을 변경하면 실시간 미리보기가 즉시 업데이트되는 것을 확인하세요.
3항목 추가/삭제 버튼을 사용하여 플렉스 항목을 추가하거나 제거하세요(최대 8개).
4출력 패널에서 생성된 CSS를 복사하여 스타일시트에 붙여넣으세요.
5초기화 버튼을 클릭하면 모든 속성이 기본값으로 돌아갑니다.

주요 기능

모든 속성 변경에 반응하는 색상 있는 플렉스 항목을 보여주는 실시간 시각적 미리보기
6가지 핵심 컨테이너 속성 제어: flex-direction, flex-wrap, justify-content, align-items, align-content, gap
최대 8개의 플렉스 항목을 추가하여 다양한 항목 수에서 레이아웃이 어떻게 동작하는지 확인
프로젝트에 바로 붙여넣을 수 있는 완성된 CSS 원클릭 복사

자주 묻는 질문

더 알아보기

CSS 플렉스박스 생성기 가이드 — 시각적으로 레이아웃 만들기