CSS Flexbox 플레이그라운드
Flex 속성을 타이핑 없이 클릭만으로 조정합니다. 미리보기가 즉시 갱신되어 각 값의 의미가 시각적으로 명확해지고, 출력란에는 CSS 규칙과 동등한 Tailwind 유틸리티 클래스가 함께 나옵니다. 모델 학습, 레이아웃 디버깅, 또는 적절한 조합을 프로젝트에 복사해 넣을 때 유용.
—
flex-direction
flex-wrap
justify-content
align-items
미리보기
1
2
3
4
5
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 클래스를 복사하세요.
자주 묻는 질문
- 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 Grid 플레이그라운드
grid-template-columns / rows·gap·아이템 정렬을 시각적으로 — CSS를 바로 복사.
개발 0 0
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상 0 0
CSS 애니메이션 생성기
CSS 애니메이션을 시각적으로 빌드 — 프리셋 선택·시간/이징/반복 조정·미리보기·키프레임 복사.
개발 0 0
CSS clip-path 빌더 (원, 타원, 다각형, Inset)
CSS `clip-path` 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.
색상 0 0
Cron 표현식 빌더
클릭으로 cron 식 생성 — 시간·일·주·월·완전 커스텀 — Cron 설명기와 짝.
개발 0 0
보이지 않는 / 제로폭 문자 탐지기
붙여넣은 텍스트의 NBSP·제로폭·양방향 마크·탭을 찾아내고 한 번에 정리.
개발 0 0