이 도구에 대하여
CSS Flexbox 플레이그라운드는 flex 컨테이너의 주요 레이아웃 속성을 위한 대화형 편집기입니다. 네 개의 드롭다운에서 flex-direction, justify-content, align-items, flex-wrap 값을 고르면 번호가 매겨진 다섯 개 상자의 미리보기가 즉시 재배열되므로, 코드를 작성하기 전에 각 속성이 레이아웃을 어떻게 만드는지 볼 수 있습니다.
미리보기 아래에는 그에 맞는 .container 규칙이 작업하는 동안 생성됩니다. display: flex 뒤에 선택한 네 개의 선언이 이어집니다. 버튼 하나로 블록 전체를 클립보드에 복사해 스타일시트에 바로 붙여 넣을 수 있습니다. 이 컨테이너 수준 속성만 노출되며, flex-grow, order, align-self 같은 개별 항목 설정은 다루지 않습니다.
모든 처리는 브라우저에서 이뤄집니다. 아무것도 업로드되지 않고 계정이나 추적도 없으며 오프라인에서 작동합니다. flexbox 감각을 빠르게 익히거나 직접 다듬을 시작 규칙을 만드는 빠른 방법입니다.
자주 묻는 질문
미리보기는 무엇을 보여 주나요?
flex-direction, justify-content, align-items, flex-wrap을 바꾸면 실시간으로 재배열되는, 번호가 매겨진 다섯 개 상자를 담은 flex 컨테이너입니다.
생성된 CSS를 바로 쓸 수 있나요?
네. 생성된 .container 규칙을 스타일시트에 바로 복사하세요. display: flex와 선택한 네 개 속성이 담겨 있습니다.
어떤 flexbox 속성을 조절할 수 있나요?
네 개의 드롭다운이 flex-direction(row, row-reverse, column, column-reverse), justify-content(flex-start, flex-end, center, space-between, space-around, space-evenly), align-items(stretch, flex-start, flex-end, center, baseline), flex-wrap(nowrap, wrap, wrap-reverse)을 제어합니다.
출력에 gap이나 개별 항목 flex 설정이 포함되나요?
아니요. 복사되는 규칙에는 display: flex와 네 개의 컨테이너 속성만 담깁니다. 미리보기의 8px gap은 간격을 위한 것일 뿐이며, flex-grow, order, align-self 같은 항목 수준 속성은 포함되지 않습니다.