Flexbox 플레이그라운드 - Flexbox를 시각적으로 조작하고 CSS 취득
드롭다운으로 flex-direction/justify-content/align-items 등을 변경하고 결과를 실시간으로 확인해요.
8px
5
preview
1
2
3
4
5
cssCode
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
gap: 8px;
}
사용 방법
- 드롭다운으로 flex-direction/justify-content 등 설정
- 자식 요소 수 조정
- 오른쪽 패널에서 실시간 미리보기
- CSS 코드 복사
FAQ
- 어떤 Flexbox 속성을 조작할 수 있나요?
- flex-direction, justify-content, align-items, flex-wrap, gap 등 주요 속성을 지원합니다.
- 자식 요소 수를 변경할 수 있나요?
- 네. 자식 요소를 추가하거나 삭제할 수 있습니다.
- 생성된 CSS를 그대로 사용할 수 있나요?
- 네. 복사한 코드를 CSS 파일에 그대로 붙여넣어 사용할 수 있습니다.
- 데이터가 서버로 전송되나요?
- 모든 처리는 브라우저에서 이루어지며, 데이터는 서버로 전송되지 않습니다.
- flex-wrap과 flex-direction은 어떻게 함께 작동하나요?
- flex-direction으로 주축을 설정하고 flex-wrap으로 줄 바꿈을 활성화하면, 여러 행 또는 열로 구성된 레이아웃을 시각적으로 확인할 수 있습니다.
관련 도구
업데이트 이력
최종 업데이트: 2026-02-21
- 2026-02-21 최초 릴리스