CSS Flexbox 플레이그라운드

flex-direction·justify-content·align-items·gap을 클릭으로 조정 — CSS 또는 Tailwind 클래스 복사.

flex-direction

flex-wrap

justify-content

align-items

gap (px)아이템

미리보기

CSS

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

Tailwind

flex gap-[8px]

사용법

각 속성의 칩을 클릭해 값을 설정하세요.
gap과 아이템 수를 조정해 더 현실적인 미리보기를 만드세요.
프로젝트에 CSS 규칙이나 Tailwind 클래스를 복사하세요.

자세한 설명

펼치기

실시간으로 놓인 상자들에 flex-direction, justify-content, align-items, flex-wrap, gap을 바꿔 가며 아래에서 생성된 CSS를 읽어 보세요. 어떤 도해보다도 이 모델을 빠르게 익히는 방법입니다. 몸에 익혀 둘 것은 두 정렬 속성의 방향이 고정되어 있지 않다는 점입니다. justify-content는 주축을 따라, align-items는 그 교차 방향으로 동작하므로, 행에서는 앞의 것이 가로로 가운데를 맞추고 열에서는 세로로 맞춥니다. 방향을 바꾸면 어느 속성이 어떤 일을 하는지가 뒤바뀌는데, 플렉스박스 혼란의 대부분이 이 한 가지 사실에서 나옵니다. 나머지는 두 가지 기본값이 설명합니다. align-items는 stretch에서 출발하므로 높이가 없는 상자가 컨테이너를 채우고, flex-wrap은 nowrap에서 출발하므로 항목이 다음 줄로 가지 않고 줄어듭니다.

자주 묻는 질문

justify-content와 align-items 차이?

justify-content는 주축(컨테이너 흐름 방향) 정렬, align-items는 교차축 정렬. 방향을 column으로 바꾸면 시각적으로 역할이 뒤바뀌는 걸 볼 수 있습니다.

align-items: stretch가 아이템을 채우는 이유는?

stretch가 기본값. 교차축에 명시적 크기가 없는 아이템이 가용 공간을 채우도록 합니다. 다른 align 값을 고르면 콘텐츠 크기로 줄어듭니다.

flex-wrap은 언제 의미가 있나요?

아이템이 한 줄에 다 들어가지 않을 때. wrap이면 다음 줄로, nowrap(기본)이면 줄어들거나 컨테이너 밖으로 넘칠 수 있습니다.

왜 Tailwind 클래스가 임의값인가요?

대부분의 flex 속성은 전용 클래스(flex, justify-center, items-center, gap-2)가 있습니다. 8px·12px 같은 커스텀 gap만 gap-[8px] 형태 임의값을 사용합니다.

CSS Flexbox 플레이그라운드

사용법

자세한 설명

자주 묻는 질문

관련 도구

CSS Grid 플레이그라운드

CSS 필터 플레이그라운드

CSS 애니메이션 생성기

CSS clip-path 빌더 (원, 타원, 다각형, Inset)

Cron 표현식 빌더

보이지 않는 / 제로폭 문자 탐지기