CSS Flexbox 생성기
브라우저에서 로컬로 실행Flexbox 레이아웃을 시각적으로 만들고 CSS, HTML, Tailwind를 복사하세요
실시간 미리보기
주축 → · 교차축 ↓ · row / nowrap
빗금 영역은 gap 간격입니다: 행 간격 12px · 열 간격 12px
소스 = HTML 내 위치. order = CSS order로, 시각적 배치만 바꿉니다.
3/24 · 최대 24개 항목.
가이드는 축, 소스 위치, CSS order, gap 간격을 보여 줍니다. 내보내기에는 포함되지 않습니다.
생성된 코드
.flex-container는 컨테이너 규칙이고, .flex-item-N은 N번째 항목의 규칙입니다. 선택한 항목: .flex-item-1
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
편집하는 즉시 코드가 업데이트됩니다.
브라우저에서 로컬로 실행됩니다. 레이아웃 설정은 이 기기의 브라우저 저장소에 저장될 수 있습니다.
CSS Flexbox 생성기
Flexbox 레이아웃을 시각적으로 만들고 바로 쓸 수 있는 CSS, HTML 또는 Tailwind 클래스를 복사하세요.
사용 방법
프리셋을 고르거나 컨테이너를 조정하세요. 항목을 클릭하거나 키보드로 선택해 flex-grow, flex-shrink, flex-basis, order, align-self를 편집합니다. 항목을 추가, 삭제, 재정렬한 뒤 CSS, HTML + CSS 또는 Tailwind를 복사하거나 다운로드하세요.
시각적 학습 도구
가이드는 현재 방향과 줄 바꿈에 맞춰 주축과 교차축을 그리고, 각 항목에 소스 위치와 CSS order를 표시하며, 항목과 줄 사이의 gap을 빗금으로 보여 줍니다.
제한 사항 및 개인정보
최대 24개 항목. 길이는 음수가 아닌 px, rem, em, %, vw, vh 값을 허용하며 calc()와 사용자 정의 CSS는 허용되지 않습니다. 미리보기는 가로, 왼쪽에서 오른쪽 쓰기 모드를 가정합니다. 모든 처리는 브라우저에서 이루어지며 설정은 로컬 저장소에 저장될 수 있습니다.
