CSS Flexbox 생성기
CSS Flexbox 레이아웃을 시각적으로 구축합니다. flex-direction, justify-content, align-items, flex-wrap 및 컨테이너의 간격과 자식별 flex-grow, flex-shrink 및 flex-basis가 모두 실시간 미리보기와 복사 가능한 CSS로 제공됩니다.
결과
Flexbox 레이아웃에는 컨테이너의 속성(flex-direction, justify-content, align-items, flex-wrap, gap)과 각 하위 속성(flex-grow, flex-shrink, flex-basis)의 두 가지 별도 규칙집이 있으며, 이를 혼합하는 것은 "왜 내가 예상한 대로 중심화/성장/래핑되지 않는가" 버그의 가장 일반적인 원인입니다. 이 생성기는 두 규칙집을 한 번에 화면에 표시합니다. 컨테이너 컨트롤이나 어린이 자신의 필드를 변경하면 번호가 매겨지고 색상으로 구분된 세 개의 상자가 즉시 업데이트되므로 원인과 결과가 계속 표시됩니다.
컨테이너 측면은 모든 레이아웃 축을 포함합니다. 방향을 선택하고, justify-content를 사용하여 자식이 기본 축을 따라 배포되는 방법을 선택하고, 교차 축에 정렬하고, 새 줄로 줄바꿈할지 결정하고, 마진 해킹 대신 간격을 설정합니다. 하위 측면도 실제와 동일합니다. 최대 8개의 상자를 추가하고 2개로 줄인 후 그 중 하나에 고유한 flex-grow, flex-shrink 및 flex-basis를 제공합니다. 생성기는 그 중 하나 이상이 브라우저 기본값과 다른 경우에만 하위별 CSS 규칙을 인쇄하므로 복사된 코드는 필요하지 않은 상자에 flex-grow: 0으로 채워지지 않습니다.
사전 설정된 페이지는 사람들이 실제로 이름으로 검색하는 레이아웃으로 바로 이동합니다. div를 가운데에 맞추는 방법(가장 많이 묻는 단일 CSS 레이아웃 질문, justify-content 및 align-items를 모두 가운데로 설정하여 해결), 로고 왼쪽 링크 오른쪽 navbar, flex-grow를 통한 동일 너비의 유연한 열, 그리고 가까운 친척과 공간 간 및 공간 균등을 나란히 비교하는 방법입니다.
이 사이트의 모든 도구와 마찬가지로 생성기는 무료이며 브라우저에서 완전히 실행됩니다. 업로드나 계정이 없으며 페이지가 로드된 후에도 오프라인으로 계속 작동합니다.