CSS Flexbox 생성기

방향·줄바꿈·간격·정렬을 실제 배치로 확인하고 CSS와 HTML을 가져오세요.

flex-direction

row row-reverse column column-reverse

flex-wrap

wrap nowrap wrap-reverse

justify-content align-items

gap · px 항목 수

미리보기 너비 (%)

출력 형식

CSS HTML

이 브라우저에서만 처리하며 업로드하거나 저장하지 않습니다.

도구 소개

방향·줄바꿈·간격·정렬을 실제 배치로 확인하고 CSS와 HTML을 가져오세요.

디자인 도구

주축과 교차축 정렬, 방향, 줄바꿈을 선택한 뒤 간격과 항목 수를 조절하세요. 너비를 바꿔 줄바꿈을 확인하고 CSS·HTML을 각각 복사하거나 저장합니다.

미리보기와 출력의 Flex 속성은 같습니다. 항목 기준 너비는 100 px, 최소 높이는 80 px입니다. 최대 48개 항목, 0–80 px 간격을 지원하며 미리보기 너비는 출력 CSS에 포함하지 않습니다.

HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.

디자인 도구

WCAG 2.2에 따라 글자와 배경의 대비를 계산하고 일반·큰 글자의 AA와 AAA 충족 여부를 표시합니다.

디자인 도구

선형·방사형 그라디언트의 색상, 위치와 각도를 조절하고 미리 보며 CSS를 만듭니다.

디자인 도구

이동, 흐림, 확산, 색상과 불투명도를 조절해 안쪽·바깥쪽 그림자를 미리 보고 CSS를 얻습니다.

디자인 도구

하여 토론에 참여하세요.

아직 댓글이 없습니다.