Flexbox 생성기

언제 사용하나요?

Flexbox 레이아웃을 구성할 때 각 속성의 효과를 미리보기로 확인하며 CSS를 생성합니다. flex 속성이 헷갈릴 때 시각적으로 확인하기 좋습니다.

사용 방법

• flex-direction, justify-content, align-items, gap 값을 선택합니다.
• 미리보기에서 아이템 배치 결과를 실시간으로 확인합니다.
• 생성된 Flexbox CSS를 복사합니다.

입력값 안내

Flex Container의 `flex-direction`, `justify-content`, `align-items`, `gap` 등 레이아웃 속성을 라디오 버튼으로 선택합니다.

계산·변환 기준

선택된 옵션 값들을 바탕으로 `.container { display: flex; flex-direction: ... }` 형태의 CSS 클래스 코드를 문자열로 조합하고, 이를 미리보기 DOM 요소의 style 속성에 적용하여 요소 배치를 렌더링합니다.

사용 예시

• 레이아웃 실험 - Flexbox 옵션을 바꾸며 배치 결과와 CSS를 확인합니다.
• 배포 전 빠른 점검 - 입력값과 생성 결과를 확인해 개발·운영 작업 전 오류 가능성을 줄입니다.
• 문서·리뷰 보조 - 정리된 결과를 복사해 개발 문서, 이슈, 코드 리뷰 코멘트에 바로 붙여넣습니다.

예시

• justify-content: center, align-items: center 선택 → 자식 요소를 정중앙에 수직/수평 배치하는 코드 생성
• justify-content·align-items를 center로 → 자식 요소를 정중앙 배치

주의사항

• 생성된 Flexbox CSS는 참고용입니다. IE 11 이하에서는 일부 속성 지원이 다를 수 있습니다.
• 입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

Flexbox 핵심 속성

flex-direction(주축 방향), justify-content(주축 정렬), align-items(교차축 정렬), gap(자식 간격) 조합으로 대부분의 레이아웃을 만들 수 있습니다.

시각적 미리보기 활용

속성을 바꾸면 미리보기가 즉시 업데이트됩니다. 생성된 CSS를 복사해 프로젝트에 바로 적용하세요.

자주 묻는 질문

미리보기가 있나요?

네, 3개 아이템의 배치 결과를 즉시 보여줍니다.

flex-direction은 무엇을 바꾸나요?

row는 아이템을 가로로, column은 세로로 배치하며 reverse 옵션으로 순서를 뒤집을 수 있습니다.

아이템 간격도 조절되나요?

gap 값을 슬라이더로 조절해 자식 요소 사이 간격을 함께 설정할 수 있습니다.

생성한 코드는 부모에 적용하나요?

display: flex와 정렬 속성은 자식을 감싸는 부모(컨테이너) 요소에 적용해야 효과가 나타납니다.

관련 도구

• Grid 생성기 - 컬럼 수, gap, 아이템 수를 조정해 CSS Grid 레이아웃 코드를 생성합니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• CSS vw 단위 변환기 - px 값을 viewport 너비 기준 vw 단위로 변환하거나 그 반대로 변환합니다.
• CSS border-radius 생성기 - 미리보기로 둥근 모서리 값을 확인하고 border-radius CSS를 생성합니다.
• JSON 포매터 - JSON 문자열을 보기 좋게 들여쓰기하거나 최소화합니다. 유효성 오류도 함께 표시합니다.
• UUID 생성기 - 암호학적으로 안전한 UUID v4를 최대 20개까지 한 번에 생성합니다.