Flexbox 생성기
justify·align·direction·wrap을 토글하며 미리보고 flex CSS 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
flex-direction·justify-content·align-items·flex-wrap과 간격(gap)을 드롭다운·슬라이더로 바꾸며 플렉스박스 정렬을 실시간 미리보기로 확인합니다. 아이템 개수도 조절할 수 있고, 부모 컨테이너에 그대로 붙여넣을 flex CSS를 복사할 수 있습니다.
사용 방법
- flex-direction과 flex-wrap을 골라 배치 방향과 줄바꿈을 정합니다.
- justify-content(주축)와 align-items(교차축)로 정렬을 맞춥니다.
- gap 슬라이더와 아이템 개수로 미리보기를 원하는 형태로 다듬습니다.
- 완성된 부모 컨테이너 CSS를 복사해 실제 레이아웃에 적용합니다.
자주 묻는 질문
- justify-content와 align-items 차이가 헷갈려요.
- justify-content는 '주축(main axis)' 방향 정렬입니다. flex-direction이 row면 가로, column이면 세로가 주축입니다. align-items는 그와 수직인 '교차축(cross axis)' 정렬이라, 방향을 바꾸면 두 속성의 역할도 서로 바뀝니다.
- align-items의 stretch가 미리보기에서 안 보여요.
- stretch는 자식에 고정 높이(또는 너비)가 없을 때만 교차축을 가득 채웁니다. 이 미리보기의 아이템은 높이를 지정하지 않아 stretch가 동작하며, center·flex-start 등으로 바꾸면 정렬 차이를 확인할 수 있습니다.
- 복사한 CSS는 어디에 붙여넣나요?
- flex 속성은 자식이 아니라 자식들을 감싸는 '부모(컨테이너)'에 적용합니다. 참고로 브라우저·버전에 따라 렌더링이 미세하게 다를 수 있어 실제 환경에서 최종 확인 후 사용하세요.