↔️
무료 CSS Flexbox 생성기
flex 방향, 줄바꿈, justify, align을 실시간 항목으로 실험하고 CSS를 복사하세요.
한 번 로드하면 오프라인에서도 작동
시각적 flexbox 놀이터: 방향, 줄바꿈, justify-content, align-items 및 간격을 설정하고, 항목 수를 변경하고, 항목을 클릭하여 flex-grow를 지정합니다. CSS는 실시간으로 업데이트되며 복사할 준비가 됩니다.
사전 설정
팁: 미리보기에서 항목을 클릭하여 flex-grow: 1을 토글합니다.
실시간 미리보기
css
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}html
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>🔒 모든 것이 브라우저에서 실행됩니다. 아무것도 업로드되지 않습니다.
사용 방법
대화형 flexbox 실습 도구: flex-direction, wrap, justify-content, align-items를 바꾸면 최대 10개의 항목이 즉시 재배치됩니다. 항목을 클릭하면 flex-grow: 1이 적용되어 공간을 어떻게 차지하는지 볼 수 있습니다. CSS가 실시간으로 업데이트되어 프로젝트에 바로 복사할 수 있습니다.
- 1컨테이너 설정방향, 줄바꿈, justify-content, align-items, 간격.
- 2항목 추가번호가 매겨진 flex 항목 1~10개.
- 3실험항목을 클릭해 flex-grow를 전환하고 효과를 확인하세요.
- 4CSS 복사바로 붙여 넣을 수 있는 컨테이너(및 항목) 규칙.
모든 작업이 브라우저에서 실행되며 업로드되는 것은 없습니다.