Flexbox 플레이그라운드
flex-direction
justify-content
align-items
flex-wrap
gap: 8px
아이템 수: 4
미리보기
1
2
3
4
CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}관련 외부 사이트
일부 링크는 제휴 링크입니다.
관련 도구
CSS clamp() 생성기최소/최대 크기와 뷰포트 범위로 반응형 타이포그래피·여백용 유동 CSS clamp() 값을 생성하고 미리 봅니다. 브라우저에서 완결됩니다.JSON 포맷터붙여넣기만 하면 JSON을 읽기 좋게 정렬하거나 한 줄로 압축합니다. JSON이 잘못되면 몇 번째 줄·열이 문제인지 하이라이트로 표시. 전송 없음.Base64 인코딩/디코딩텍스트와 Base64를 즉시 상호 변환 — 한글·이모지 안 깨짐(UTF-8), URL 세이프 Base64, 이미지를 data URL로 변환. 브라우저에서 바로, 전송 없음.정규식 테스터정규식을 실시간으로 테스트: 매치 하이라이트, 캡처 그룹, 플래그, 치환 미리보기를 지원합니다. 브라우저에서 완결, 업로드 없음.
CSS Flexbox를 시각적으로 실험해 보세요. flex-direction·justify-content·align-items·flex-wrap·gap을 토글하면 실시간 미리보기가 즉시 업데이트되고, 생성된 CSS를 복사할 수 있습니다. Flex 속성이 어떻게 상호작용하는지 빠르게 이해하거나 레이아웃을 조정하는 데 최적입니다. 모든 기능이 브라우저에서 작동합니다.
사용 방법
- 버튼으로 Flex 속성을 토글합니다.
- 미리보기 박스가 실시간으로 재배열되는 것을 확인합니다.
- 아이템 수를 조정하고 CSS를 프로젝트에 복사합니다.
주축과 교차축
Flex 컨테이너는 flex-direction으로 설정된 주축(행 또는 열)을 따라 아이템을 배치합니다. justify-content는 주축을 따른 아이템 위치를, align-items는 교차축(주축에 수직인 방향)의 위치를 결정합니다. flex-wrap은 아이템이 새 줄로 넘어갈지 여부를, gap은 아이템 간 균일한 간격을 설정합니다.
기능
핵심 속성 전체 지원
direction·justify-content·align-items·wrap·gap을 제어합니다.
실시간 미리보기
각 속성을 변경할 때마다 아이템이 즉시 재배열됩니다.
아이템 수 조정
박스 수를 변경해 레이아웃이 어떻게 반응하는지 확인합니다.
CSS 복사
컨테이너에 바로 사용 가능한 CSS 규칙을 가져옵니다.
활용 상황
프로토타이핑
코딩 전에 레이아웃에 맞는 Flex 설정을 빠르게 찾습니다.
Flexbox 학습
justify와 align이 함께 어떻게 동작하는지 직관적으로 이해합니다.
정렬 문제 해결
아이템을 올바르게 중앙 정렬하거나 균등 배치하는 조합을 테스트합니다.
교육 및 시연
학생이나 팀원에게 Flexbox 동작을 실시간으로 보여줍니다.
참고 사항
- 주축은 flex-direction(row 또는 column)을 따릅니다.
- justify-content는 주축에, align-items는 교차축에 작용합니다.
- 줄 바꿈은 아이템이 컨테이너 너비를 초과할 때만 의미가 있습니다.
- 모든 처리는 기기에서 이루어지며 업로드되지 않습니다.
자주 묻는 질문
- justify-content와 align-items의 차이는 무엇인가요?
- justify-content는 주축(flex-direction으로 설정한 방향)을 따라 아이템을 배치하고, align-items는 수직 교차축을 따라 아이템을 배치합니다.
- 주축이란 무엇인가요?
- 아이템이 흐르는 기본 방향입니다. flex-direction: row이면 수평, column이면 수직입니다.
- flex-wrap은 언제 중요한가요?
- 아이템 전체 너비(또는 높이)가 컨테이너를 초과할 때만 중요합니다. wrap을 사용하면 넘치는 아이템이 축소되거나 오버플로되지 않고 새 줄로 이동합니다.
- gap은 무엇을 하나요?
- gap은 마진 없이 Flex 아이템 간에 균일한 간격을 추가해 레이아웃을 깔끔하게 유지합니다.
- 서버로 전송되는 데이터가 있나요?
- 아니요. 플레이그라운드는 완전히 브라우저 내에서 실행되며 아무것도 업로드되지 않습니다.