⭐ 0
🔍
텍스트 이미지 PDF 및 문서 오디오 음악 전자 회로 시간 유틸리티 검증인 신비주의 게임

CSS Flexbox 제너레이터

CSS flexbox 레이아웃을 시각적으로 구성하세요. 컨테이너의 flex-direction, justify-content, align-items, flex-wrap, gap과 각 자식 요소의 flex-grow, flex-shrink, flex-basis를 실시간 미리 보기와 함께 확인하고 CSS를 복사할 수 있습니다.

🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.

처리 중... 0%

결과

Flexbox 레이아웃에는 두 개의 별도 규칙 체계가 있습니다. 하나는 컨테이너의 속성(flex-direction, justify-content, align-items, flex-wrap, gap)이고, 다른 하나는 각 자식의 속성(flex-grow, flex-shrink, flex-basis)입니다. 이 둘을 혼동하는 것이 "왜 이게 기대한 대로 가운데 정렬/성장/줄 바꿈되지 않지?"라는 버그의 가장 흔한 원인입니다. 이 제너레이터는 두 규칙 체계를 한 화면에 동시에 보여줍니다. 컨테이너 컨트롤이나 자식의 필드를 변경하면 번호가 매겨지고 색상으로 구분된 세 개의 상자가 즉시 업데이트되므로 원인과 결과를 눈으로 확인할 수 있습니다.

컨테이너 측에서는 모든 레이아웃 축을 다룹니다. 방향을 선택하고, justify-content로 주축에서 자식들이 어떻게 분배될지 정하며, 교차축에서 정렬하고, 새로운 줄로 줄 바꿈할지 결정하고, 마진 해킹 대신 gap을 설정합니다. 자식 측도 마찬가지로 실제적입니다. 최대 8개까지 상자를 추가하거나 최소 2개까지 줄일 수 있으며, 각 상자에 개별 flex-grow, flex-shrink, flex-basis 값을 부여합니다. 이 제너레이터는 적어도 하나 이상의 값이 브라우저 기본값과 다를 때만 자식별 CSS 규칙을 출력하므로, 복사된 코드가 필요 없는 상자에 flex-grow: 0을 덧붙여 스스로를 채우지 않습니다.

프리셋 페이지는 사람들이 실제로 이름으로 검색하는 레이아웃으로 바로 이동합니다. div 가운데 정렬 방법 (CSS 레이아웃 질문 중 가장 많이 묻는 질문으로, justify-content와 align-items를 모두 center로 설정하여 해결), 로고 왼쪽-링크 오른쪽 내비게이션 바, flex-grow를 통한 동일 너비의 유연한 열, 그리고 space-between과 가까운 친척인 space-around, space-evenly의 나란히 비교입니다.

이 사이트의 모든 도구와 마찬가지로, 이 제너레이터는 무료이며 브라우저에서 완전히 실행됩니다. 업로드, 계정이 필요 없고 페이지가 로드된 후에는 오프라인에서도 계속 작동합니다.

이 도구가 마음에 드시나요? 유용하다고 생각하시나요? 잠재력을 보시고 지원하고 싶으신가요?

🛡️
브라우저에서 실행

파일과 입력값은 이 기기를 절대 떠나지 않습니다. 모든 처리가 완전히 오프라인에서 이뤄집니다. 100% 안전합니다.

허용 형식 & 규칙

  • 컨테이너 설정: flex-direction, justify-content, align-items, flex-wrap 그리고 픽셀 단위의 gap 입력 필드를 제공하며, 미리 보기에 실시간으로 적용됩니다.
  • 기본적으로 세 개의 색상 구분 자식 상자가 제공되며(최대 8개까지 추가, 최소 2개까지 제거 가능), 각 상자마다 flex-grow, flex-shrink, flex-basis 필드를 개별적으로 설정할 수 있습니다.
  • 복사 가능한 CSS 블록으로, .flex-container 규칙과 기본값이 아닌 flex 속성을 가진 각 자식에 대한 .flex-item-N 규칙이 포함됩니다.

주요 장점

✓ 컨테이너의 모든 설정과 각 자식 요소의 flex-grow, flex-shrink, flex-basis 값을 변경하면 번호가 매겨진 세 개의 미리 보기 상자가 실시간으로 업데이트됩니다. 스타일시트를 건드리기 전에 flexbox 규칙이 어떻게 작용하는지 정확하게 확인할 수 있습니다.
✓ 이 제너레이터는 CSS 기본값과 실제로 다른 자식 규칙만 출력합니다. 따라서 복사된 코드는 모든 상자에 flex-grow: 0을 반복해서 적지 않아 간결하고 읽기 쉬운 상태를 유지합니다.
✓ 프리셋 페이지는 사람들이 이름으로 검색하는 레이아웃을 바로 해결해 줍니다. div 가운데 정렬, 로고는 왼쪽에 링크는 오른쪽에 배치하는 내비게이션 바, 그리고 동일한 너비의 유연한 열 등이 있으며, 프리셋을 열면 도구가 이미 설정된 상태로 시작됩니다.

사용 사례

  • • justify-content와 align-items가 라이브 프리뷰 상자에 적용되는 모습을 보면서, div를 수평과 수직 모두 정가운데로 배치하는 정확한 CSS를 얻으세요.
  • • space-between과 align-items: center로 로고는 왼쪽, 링크는 오른쪽에 배치하는 내비게이션 바 레이아웃을 만든 다음, 컨테이너 CSS를 그대로 헤더 컴포넌트에 복사해 넣으세요.
  • • 원하는 간격에 맞는 속성이 무엇인지 짐작하지 말고, 똑같은 세 개의 상자에 space-between, space-around, space-evenly가 적용된 모습을 나란히 비교해 보세요.