CSS Flexbox와 Grid 레이아웃을 시각적으로 만들고 CSS 코드를 복사하세요. 실시간 미리보기, 프리셋, 반응형 테스트 지원.
Flexbox는 1차원 레이아웃(행 또는 열 중 하나)에 적합합니다. 네비게이션 바, 카드 목록, 정렬 등에 사용합니다. CSS Grid는 2차원 레이아웃(행과 열 동시)에 적합합니다. 전체 페이지 레이아웃, 대시보드, 갤러리 등에 사용합니다. 실무에서는 둘을 함께 사용합니다: Grid로 전체 구조를 잡고, Flex로 내부 요소를 배치합니다.
컨테이너: display: flex, flex-direction(row/column), justify-content(main 축 정렬: center, space-between), align-items(cross 축 정렬: center, stretch), flex-wrap(줄바꿈), gap(간격). 아이템: flex-grow(남은 공간 비율), flex-shrink(축소 비율), flex-basis(기본 크기), order(순서 변경). 가장 자주 쓰는 패턴: display:flex + justify-content:center + align-items:center로 완벽한 중앙 정렬.
CSS Flexbox & Grid 생성기는 복잡한 CSS 레이아웃 속성을 GUI로 조작하면서 실시간으로 결과를 미리보고 완성된 CSS 코드를 복사할 수 있는 무료 온라인 개발 도구입니다. Flexbox의 justify-content·align-items·flex-wrap과 CSS Grid의 grid-template-columns·gap 등을 시각적으로 설정하면 반응형 웹 레이아웃 코드를 빠르게 완성할 수 있습니다.