무료 변환기
CSS 플렉스박스 레이아웃 생성기
실시간 미리보기를 통해 CSS Flexbox 레이아웃을 시각적으로 생성합니다. flex-direction, justify-content, align-items 등을 무료로 클라이언트 측에서 조정하세요.
실시간 미리보기
1
2
3
4
5
플렉스 방향
플렉스 랩
정당화 내용
항목 정렬
격차 (8px)
0px32px64px
CSS 출력
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}
.item {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
min-width: 60px;
text-align: center;
}