디자인

CSS Flexbox 생성기

시각적으로 플렉스 레이아웃 구축

레이아웃 레시피 (10가지 프리셋)

선택한 자식 요소 설정

플렉스 레이아웃을 시각적으로 만들기

레시피 선택 또는 컨트롤 조정 — 미리보기 실시간 갱신. .container 규칙을 스타일시트에 복사.

FAQ

무엇을 생성하나요?

바로 복사해 쓸 수 있는 .container flex 규칙으로, 방향, 정렬, 줄 바꿈, gap을 포함하며 자식 요소 수를 조절할 수 있는 실시간 미리보기도 제공합니다.

레이아웃 레시피란 무엇인가요?

내비게이션 바, 중앙 hero, 카드 행, 사이드바 셸, 세로 스택, 푸터 바 등 개발자가 자주 사용하는 패턴을 담은 원클릭 프리셋 열 개입니다.

업로드되는 게 있나요?

아니요. CSS는 전부 브라우저에서 생성됩니다.

마지막 업데이트: