이 도구에 대해
Flexbox는 현대 CSS 레이아웃의 근간이지만, 그 속성들은 실제로 작동하는 모습을 보기 전까지 기억하기 어렵습니다. 이 생성기는 flex-direction, justify-content, align-items, flex-wrap, gap을 간단한 컨트롤로 바꾸고, 무언가를 바꾸는 즉시 재배열되는 실제 아이템 행을 함께 보여 줍니다.
속성들이 어떻게 상호작용하는지 이해하는 가장 빠른 방법입니다 — 레이아웃이 괜찮으면 컨테이너 CSS를 복사하세요. 모든 것이 브라우저에서 실행됩니다.
자주 묻는 질문
이 도구는 컨테이너용 CSS를 생성하나요, 개별 항목용 CSS를 생성하나요?
부모 컨테이너의 flex 속성(flex-direction, justify-content, align-items, flex-wrap, gap)을 생성합니다 — flex-grow나 order 같은 항목별 속성은 다루지 않습니다.
justify-content와 align-items의 차이는 무엇인가요?
justify-content는 주축(row 레이아웃에서는 가로 방향)을 따라 간격을 제어하고, align-items는 교차축(row 레이아웃에서는 세로 방향)을 따라 정렬을 제어합니다.
최신 프로젝트에서도 flexbox에 벤더 접두사가 필요한가요?
아니요, 모든 최신 브라우저는 접두사 없는 flexbox 속성을 지원합니다. 예전 -webkit-box / -ms-flexbox 문법은 10년 이상 된 브라우저에만 필요합니다.
제 레이아웃 데이터가 어딘가에 업로드되나요?
아니요. 미리보기와 생성된 CSS는 전적으로 브라우저에서 실행되며 서버로 전송되는 것은 없습니다.
일부 오래된 브라우저에서 gap 값이 적용되지 않는 이유는 무엇인가요?
flex 컨테이너 내부의 gap 속성은 2021년 이후 출시된 모든 브라우저에서 지원됩니다. 더 오래된 브라우저에서는 대신 항목에 margin을 사용하세요.