AZ Tools

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]

사용법

  1. 각 속성의 칩을 클릭해 값을 설정하세요.
  2. gap과 아이템 수를 조정해 더 현실적인 미리보기를 만드세요.
  3. 프로젝트에 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] 형태 임의값을 사용합니다.

관련 도구

JWT 디코더

JWT의 헤더·클레임·만료를 즉시 확인하세요.

개발00

UUID 생성기

무작위 버전4 UUID를 여러 개 한 번에 생성하고 복사하세요.

개발00

해시 생성기 (SHA)

텍스트로 SHA-1·SHA-256·SHA-384·SHA-512 해시를 생성하세요.

개발00

URL 인코더 / 디코더

URL용으로 텍스트를 퍼센트 인코딩하거나, 인코딩된 URL을 디코딩하세요.

개발00

Base64 인코더 / 디코더

텍스트를 Base64로 인코딩하거나 다시 텍스트로 디코딩하세요.

개발00

JSON 포맷터 & 검증기

브라우저에서 바로 JSON을 포맷·정렬·압축·검증하세요.

개발00