CSS Flexbox 생성기
CSS Flexbox 레이아웃을 라이브 미리보기로 시각적으로 생성합니다. flex-direction, justify-content, align-items, flex-wrap, gap을 조정하세요. CSS 코드 복사. 무료.
미리보기
CSS 출력
참고
CSS Flexbox란?
CSS Flexbox(유연한 박스 레이아웃)는 컨테이너 내 아이템을 1차원으로 배치하는 레이아웃 모델입니다. 행 또는 열 방향으로 아이템을 배치하고, 공간 분배와 정렬을 유연하게 제어할 수 있습니다. 반응형 디자인에 필수적인 도구입니다.
주요 속성
flex-direction — 주축 방향 설정 (row, row-reverse, column, column-reverse). justify-content — 주축 방향 아이템 정렬 (flex-start, center, space-between, space-around 등). align-items — 교차축 방향 아이템 정렬 (stretch, center, flex-start, flex-end 등). flex-wrap — 아이템 줄바꿈 (nowrap, wrap, wrap-reverse). gap — 아이템 간 간격 설정.
개인정보보호
모든 생성 처리는 브라우저에서 100% 실행됩니다. 데이터는 서버에 전송되지 않습니다.