Flexbox 플레이그라운드
실시간 항목에 CSS Flexbox 속성을 실험하고 생성된 레이아웃 CSS를 복사하세요.
미리보기
항목을 클릭해 편집하세요
생성된 CSS
—
모든 작업이 브라우저에서 실행됩니다 — 아무것도 업로드되지 않습니다.
컨테이너
12px
항목
0
선택한 항목
Flexbox 플레이그라운드 소개
플렉스박스 플레이그라운드는 CSS 플렉스박스를 직접 실습해 볼 수 있는 샌드박스입니다. flex-direction, flex-wrap, justify-content, align-items, align-content, gap 같은 컨테이너 속성을 설정하면 미리보기 안 최대 12개의 아이템이 값이 바뀔 때마다 실시간으로 재배치됩니다. 각 속성이 실제로 무엇을 하는지 가장 빠르게 체득하는 방법입니다.
아이템은 개별적으로 편집할 수 있습니다. 하나를 클릭해 선택한 뒤 flex-grow, flex-shrink, flex-basis, align-self, order를 조정하세요. 한 아이템이 남는 공간을 차지하며 커지는 동안 다른 형제 아이템은 자기 너비를 유지하는 모습을 보면, 어떤 도식보다 빠르게 플렉스 크기 조정 모델을 이해할 수 있습니다.
플레이그라운드는 컨테이너와 기본값이 아닌 설정을 가진 모든 아이템에 대해 깔끔한 CSS를 생성합니다. 그대로 복사해 스타일시트에 붙여 넣으세요. 모든 과정은 브라우저 안에서 실행되며 업로드되는 것이 없고, 초기화 버튼으로 언제든 깨끗한 상태로 되돌릴 수 있습니다.
Flexbox 플레이그라운드 사용 방법
- 컨테이너의 flex-direction, wrap, justify-content, align-items, align-content, gap을 설정합니다.
- 실제 컴포넌트를 반영하도록 아이템을 2개에서 12개 사이로 추가하거나 제거합니다.
- 아이템을 클릭한 뒤 grow, shrink, basis, align-self, order를 조정합니다.
- 값을 바꿀 때마다 실시간 미리보기가 갱신되는 것을 확인합니다.
- 생성된 CSS를 복사해 프로젝트에 붙여 넣습니다.
자주 묻는 질문
flex-grow는 남는 공간을 분배합니다. grow 값이 2인 아이템은 grow 값이 1인 아이템보다 두 배 많은 추가 공간을 받습니다. flex-shrink는 공간이 부족할 때 반대 방향으로 작동합니다. 둘 다 절대 크기가 아니라 형제 요소 간의 비율입니다.
align-items는 교차축을 따라 아이템을 자신의 줄 안에서 배치합니다. align-content는 여러 줄로 줄바꿈된 라인들을 컨테이너 안에서 배치하는 것으로, flex-wrap으로 인해 줄이 두 개 이상일 때만 눈에 보이는 효과가 생깁니다.
모든 플렉스 아이템은 기본적으로 order 값이 0이며, 아이템은 낮은 order부터 높은 order 순으로 배치됩니다. 아이템의 order를 바꾸면 HTML은 그대로 둔 채 화면상의 위치만 이동합니다. DOM 순서, 즉 스크린 리더가 읽는 순서는 그대로 유지됩니다.
네. 생성된 CSS에는 컨테이너 규칙뿐 아니라 grow, shrink, basis, align-self, order가 기본값과 다른 각 아이템에 대한 선택자도 포함되어 있어, 완전하게 동작하는 레이아웃을 그대로 붙여 넣을 수 있습니다.
네, 무료이며 가입이 필요 없고 전적으로 클라이언트 측에서 실행됩니다. 실험 내용은 브라우저 탭을 벗어나지 않습니다.
인기 검색어
flexbox 플레이그라운드
css flexbox 생성기
flex 컨테이너 생성기
justify-content align-items 도구
css flex 레이아웃 생성기
flexbox 시각화 도구
flexbox 코드 생성기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.