CSS Flexbox 생성기 - 플렉스 레이아웃 시각 빌더 온라인
비주얼 컨트롤로 CSS Flexbox 레이아웃 생성. 방향, 정렬, 줄바꿈, 간격을 라이브 미리보기로 조정 — CSS 코드 자동 생성.
자주 묻는 질문
CSS Flexbox란 무엇인가요?
CSS Flexbox(Flexible Box Layout)는 컨테이너 내 아이템 간의 공간을 효율적으로 배치, 정렬, 분배하는 CSS 레이아웃 모듈입니다. 기존 블록/인라인 레이아웃과 달리 방향에 구애받지 않으며 한 차원(행 또는 열)에서 작동합니다. 아이템 크기가 동적이거나 알 수 없는 경우에도 공간 분배와 콘텐츠 정렬에 탁월하여 반응형 디자인, 네비게이션 바, 카드 레이아웃, 요소 중앙 정렬에 이상적입니다.
이 Flexbox 생성기를 어떻게 사용하나요?
컨트롤 패널에서 컨테이너 속성을 설정하세요: flex-direction, flex-wrap, justify-content, align-items, gap 값을 선택합니다. 추가/삭제 버튼으로 자식 아이템을 관리하세요(기본 3개). 미리보기에서 아이템을 클릭하면 개별 flex 속성(grow, shrink, basis, order, align-self)을 조정할 수 있습니다. 변경 시 실시간으로 미리보기가 업데이트됩니다. 프리셋 레이아웃(네비바, 카드 그리드, 사이드바 등)을 시작점으로 사용할 수도 있습니다. 복사 버튼으로 생성된 CSS와 HTML 코드를 복사하세요.
데이터는 안전한가요? 서버로 전송되나요?
네, 완전히 안전합니다. 이 도구는 클라이언트 측 JavaScript를 사용하여 브라우저에서 전적으로 실행됩니다. 레이아웃 구성, CSS 코드 또는 어떤 데이터도 서버로 전송되지 않습니다. 모든 코드 생성과 미리보기 렌더링은 사용자 기기에서 로컬로 이루어져 완전한 개인정보 보호를 보장합니다.
justify-content와 align-items의 차이점은 무엇인가요?
justify-content는 주축(flex-direction: row이면 가로, column이면 세로)을 따라 아이템이 분배되는 방식을 제어합니다. align-items는 교차축(주축에 수직인 방향)을 따라 아이템이 정렬되는 방식을 제어합니다. 예를 들어, 행 레이아웃에서 justify-content: center는 아이템을 가로로 중앙 정렬하고, align-items: center는 아이템을 세로로 중앙 정렬합니다.
flex-wrap은 언제 사용해야 하나요?
flex-wrap: wrap은 아이템이 한 줄에 억지로 들어가지 않고 여러 줄로 흘러가도록 할 때 사용합니다. 반응형 카드 그리드, 태그 목록, 컨테이너 너비가 부족할 때 자연스럽게 다음 줄로 넘어가야 하는 레이아웃에 필수입니다. 줄 바꿈 없이(nowrap) 모든 아이템이 한 줄에 강제로 들어가면 오버플로우가 발생하거나 최소 크기 이하로 축소될 수 있습니다.
gap 속성이란 무엇이며 마진보다 나은 이유는?
gap 속성은 컨테이너 외부 가장자리에 공간을 추가하지 않고 flex 아이템 사이의 간격을 정의합니다. 마진과 달리 gap은 아이템 사이에만 공간을 생성하며(첫 번째 이전이나 마지막 이후에는 아님), 마진 병합 문제가 없고, flex-direction에 관계없이 일관되게 작동합니다. row-gap과 column-gap을 독립적으로 설정하여 다른 가로/세로 간격을 줄 수 있습니다.
flex-grow, flex-shrink, flex-basis는 어떻게 함께 작동하나요?
이 세 속성은 컨테이너 내에서 아이템의 크기를 제어합니다. flex-basis는 남은 공간이 분배되기 전 아이템의 초기 크기를 설정합니다(기본값: auto). flex-grow는 남은 여유 공간을 아이템이 얼마나 차지할지 결정합니다(기본값: 0, 늘어나지 않음). flex-shrink는 컨테이너가 너무 작을 때 아이템이 얼마나 줄어들지 결정합니다(기본값: 1, 줄어들 수 있음). 예: flex: 1 1 0은 아이템이 동일하게 늘어나고 줄어들어 같은 비율의 공간을 차지합니다.
코드 예제
// CSS Flexbox Generator - JavaScript
function generateFlexboxCSS(options = {}) {
const {
display = 'flex',
flexDirection = 'row',
flexWrap = 'nowrap',
justifyContent = 'flex-start',
alignItems = 'stretch',
alignContent = 'stretch',
rowGap = 0,
columnGap = 0,
} = options;
const rules = [`display: ${display}`];
if (flexDirection !== 'row') rules.push(`flex-direction: ${flexDirection}`);
if (flexWrap !== 'nowrap') rules.push(`flex-wrap: ${flexWrap}`);
if (justifyContent !== 'flex-start') rules.push(`justify-content: ${justifyContent}`);
if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
if (alignContent !== 'stretch' && flexWrap !== 'nowrap') {
rules.push(`align-content: ${alignContent}`);
}
if (rowGap > 0 || columnGap > 0) {
if (rowGap === columnGap) {
rules.push(`gap: ${rowGap}px`);
} else {
rules.push(`gap: ${rowGap}px ${columnGap}px`);
}
}
return rules.map(r => `${r};`).join('\n');
}
function generateFlexItemCSS(options = {}) {
const {
flexGrow = 0,
flexShrink = 1,
flexBasis = 'auto',
order = 0,
alignSelf = 'auto',
} = options;
const rules = [];
if (flexGrow !== 0 || flexShrink !== 1 || flexBasis !== 'auto') {
rules.push(`flex: ${flexGrow} ${flexShrink} ${flexBasis}`);
}
if (order !== 0) rules.push(`order: ${order}`);
if (alignSelf !== 'auto') rules.push(`align-self: ${alignSelf}`);
return rules.map(r => `${r};`).join('\n');
}
// Usage
console.log(generateFlexboxCSS({
justifyContent: 'center',
alignItems: 'center',
rowGap: 16,
columnGap: 16,
}));
// display: flex;
// justify-content: center;
// align-items: center;
// gap: 16px;