Developer Layout Utility
Flexbox Playground
justify-content, align-items, flex-direction, flex-wrap, gap, align-content 속성을 실시간으로 테스트하고 CSS 코드를 바로 생성할 수 있는 Flexbox 레이아웃 도구입니다.
Flexbox 설정
Flex 컨테이너의 방향, 정렬, 줄바꿈, 간격, 아이템 크기를 설정하세요.
생성 결과
현재 Flexbox 설정 기준 CSS 코드입니다.
Flexbox 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
Flexbox 정렬 방식 비교
Flexbox는 방향과 축 개념을 이해하면 버튼 그룹, 카드 목록, 네비게이션 레이아웃을 빠르게 만들 수 있습니다.
메인 축 방향 정렬입니다. row에서는 가로 정렬, column에서는 세로 정렬을 담당합니다.
교차 축 방향 정렬입니다. 아이템을 위, 가운데, 아래 또는 stretch 방식으로 배치할 수 있습니다.
flex-wrap으로 여러 줄이 생겼을 때 줄 묶음 전체의 교차 축 정렬을 제어합니다.
도움말
Flexbox Playground란?
Flexbox Playground는 Flexbox 속성을 실시간으로 테스트하고 CSS 코드를 생성할 수 있는 개발자 레이아웃 유틸리티입니다.
버튼 그룹, 네비게이션, 카드 리스트, 태그 목록, 폼 레이아웃, 관리자 대시보드 UI를 만들 때 활용할 수 있습니다.
지원 기능
- flex-direction, justify-content, align-items 설정
- flex-wrap, align-content 설정
- gap, padding, item count 조절
- item width, item height, border-radius 조절
- 자주 쓰는 Flexbox 프리셋 적용
- 실시간 미리보기와 CSS 코드 복사 및 다운로드
justify-content와 align-items는 어떻게 다른가요?
justify-content는 메인 축 정렬이고 align-items는 교차 축 정렬입니다. flex-direction이 row인지 column인지에 따라 메인 축과 교차 축 방향이 달라집니다.
align-content는 언제 적용되나요?
align-content는 flex-wrap이 적용되어 여러 줄이 생겼을 때 줄 묶음 전체를 정렬합니다. 한 줄만 있는 flex 레이아웃에서는 차이가 거의 보이지 않을 수 있습니다.
flex-wrap은 언제 사용하나요?
아이템 개수가 많거나 화면 너비가 좁을 때 줄바꿈이 필요하면 flex-wrap: wrap을 사용합니다. 태그 목록, 카드 리스트, 버튼 그룹에 자주 사용됩니다.
Flexbox와 CSS Grid는 어떻게 구분해서 쓰나요?
Flexbox는 한 방향 정렬과 아이템 흐름 제어에 강하고, CSS Grid는 행과 열을 동시에 설계하는 2차원 레이아웃에 적합합니다.
생성된 CSS를 바로 사용해도 되나요?
생성된 코드는 기본 Flexbox 레이아웃 코드입니다. 실제 프로젝트에 적용할 때는 부모 요소 너비, 반응형 breakpoint, 아이템 내부 콘텐츠 길이를 함께 확인하는 것이 좋습니다.