색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS Flexbox 생성기
방향·줄바꿈·간격·정렬을 실제 배치로 확인하고 CSS와 HTML을 가져오세요.
도구 소개
버튼이나 조작 요소를 배치하면서 좁은 공간에서의 줄바꿈도 검토할 수 있습니다.
사용 방법
주축과 교차축 정렬, 방향, 줄바꿈을 선택한 뒤 간격과 항목 수를 조절하세요. 너비를 바꿔 줄바꿈을 확인하고 CSS·HTML을 각각 복사하거나 저장합니다.
미리보기와 출력의 Flex 속성은 같습니다. 항목 기준 너비는 100 px, 최소 높이는 80 px입니다. 최대 48개 항목, 0–80 px 간격을 지원하며 미리보기 너비는 출력 CSS에 포함하지 않습니다.
자주 묻는 질문
미리보기 너비도 내보내나요?
너비는 공간을 시험하기 위한 설정입니다. 출력에는 flex 규칙과 기본 항목 크기만 들어갑니다. 실제 컨테이너 너비와 스타일은 페이지에서 정하세요.
column으로 바꾸면 가운데 정렬 방향이 달라지는 이유는 무엇인가요?
justify-content는 주축, align-items는 교차축을 제어합니다. row의 주축은 가로이고 column의 주축은 세로입니다. 두 방향 모두 가운데 정렬하려면 둘 다 center로 설정하고, 컨테이너에도 해당 방향으로 배분할 여유 공간을 두세요.
관련 도구
새 탭에서 열립니다
댓글
0