.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
}Flexbox Generator 란 무엇입니까?
Flexbox Generator 는 CSS Flexible Box Layout 을 위한 시각적 놀이터입니다. 버튼과 슬라이더로 컨테이너 속성을 설정하고 실시간 미리보기를 통해 항목을 실시간으로 재정렬하고 미리보기가 사용하고 있는 정확한 CSS 를 복사합니다. 이는 어떤 속성이 무엇을 하는지 기억하는 추측을 제거하므로 브라우저 개발 도구에서 시행착오 없이 행,열, 중앙 레이아웃 또는 카드 래핑 그리드를 구축할 수 있습니다.
Flexbox 는 1 차원 레이아웃 모델입니다: 항목은 주축을 따라 배치되고 교차 축에 정렬됩니다. 컨테이너는 6 개의 속성을 통해 거의 모든 것을 구동합니다. flex-direction 은 주축을 선택하고 앞으로 또는 뒤로 실행되는지 여부를 결정합니다. justify-content 는 주축을 따라 여유 공간을 분배합니다. align-items 는 항목을 교차 축에 배치합니다. flex-wrap 은 항목이 새로운 선으로 오버플로되는지 여부를 결정하고,lang-content spaces that lines apart on on wrapping is on. gap 은 여백이 없는 항목 사이에 일관된 간격을 추가합니다.
이 도구는 이러한 모든 속성을 한 곳에 노출시키고 결과를 즉시 보여줍니다. 미리보기는 출력 상자에 나타나는 것과 동일한 선언으로 렌더링되기 때문에 CSS 를 스타일시트에 붙여 넣을 때 정확히 표시되는 것이 생성됩니다. 규칙은 기본적으로.container 클래스를 대상으로 하며,단일 줄에 영향을 주지 않기 때문에 래핑이 활성화되었을 때만 align-content 를 포함하여 중요한 속성만 나열합니다.
모든 것이 브라우저에서 완전히 실행됩니다. 가입이 없고,아무것도 업로드되지 않으며,페이지가 로드되면 도구가 오프라인으로 계속 작동합니다. 플렉스 속성이 어떻게 상호 작용하는지 이해하기 위한 학습 보조 도구로서나 프로덕션 준비 CSS 를 생성하는 빠른 방법으로 똑같이 유용합니다. 미리보기 항목 수를 변경하고,머리에 있는 컨테이너의 크기를 조정하고,원하는 정렬을 생성하는 선언을 읽어냅니다. 그것이 사이에 공간이 있는 탐색 모음 스프레드이든,양 축을 완벽하게 중심으로 한 영웅 섹션이든 상관없습니다.
Flexbox Generator 를 사용하는 방법은 무엇입니까?
방향을 선택하고 랩
플렉스 방향을 선택하고 항목을 여러 줄로 감싸야 하는지 여부를 선택합니다.
정렬을 설정합니다
미리보기가 레이아웃과 일치할 때까지 주축의 justify-content를 조정하고 교차 축의 항목을 정렬합니다.
튠 간격
항목 사이의 간격을 설정하고 래핑이 켜져 있을 때 선을 구분하는 정렬 내용을 설정합니다.
CSS 복사
생성된 규칙은 실시간으로 업데이트됩니다. 한 번의 클릭으로 복사하여 스타일시트에 붙여넣습니다.
주요 특징
실시간 미리보기
속성을 변경하면 샘플 항목의 컨테이너가 즉시 리플로우되므로 코드를 복사하기 전에 레이아웃이 표시됩니다
모든 컨테이너 속성
디스플레이 제어, 플렉스 방향, 플렉스 랩, 내용 정당화, 항목 정렬, 내용 정렬 및 한 패널의 간격
당신이 보는 것은 당신이 얻는 것입니다
미리보기는 출력과 동일한 선언을 사용하므로 복사된 CSS는 화면에서 정확히 레이아웃을 생성합니다
깨끗하고 최소한의 출력
생성된 규칙은 의미 있는 속성만 나열하고 래핑이 켜질 때까지 align-content를 생략합니다
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Box Shadow Generator
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset - then copy production-ready CSS.
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
CSS Gradient Generator
Create beautiful CSS gradients with live preview
Comments
0 comments
No comments yet. Be the first to share your thoughts!