이런 분께 유용합니다
- 버튼·내비게이션·카드 행을 배치하는 개발자
- justify-content와 align-items를 비교하는 입문자
- 줄바꿈되는 구성 요소의 반응형 동작을 확인하는 디자이너
Developer Layout Utility
Flexbox Playground
justify-content, align-items, flex-direction, flex-wrap, gap, align-content 속성을 실시간으로 테스트하고 CSS 코드를 바로 생성할 수 있는 Flexbox 레이아웃 도구입니다.
실시간 Flexbox 미리보기
속성 변경 시 아이템 정렬, 방향, 줄바꿈, 간격이 즉시 미리보기에 반영됩니다.
CSS 자동 생성
현재 Flexbox 설정을 기준으로 컨테이너와 아이템 CSS 코드를 자동 생성합니다.
레이아웃 학습용
justify-content, align-items, align-content의 차이를 직접 확인할 수 있습니다.
Flexbox 설정
Flex 컨테이너의 방향, 정렬, 줄바꿈, 간격, 아이템 크기를 설정하세요.
빠른 프리셋
자주 사용하는 Flexbox 패턴을 바로 적용할 수 있습니다.
0px
16px
60px
0px
24px
60px
2
5
16
240px
420px
700px
60px
92px
220px
60px
86px
180px
0px
20px
40px
Live Preview
Direction
row
Gap
16px
Wrap
nowrap
생성 결과
현재 Flexbox 설정 기준 CSS 코드입니다.
Flexbox 설정을 변경한 뒤 CSS 코드 생성하기 버튼을 눌러주세요.
Flexbox 정렬 방식 비교
Flexbox는 방향과 축 개념을 이해하면 버튼 그룹, 카드 목록, 네비게이션 레이아웃을 빠르게 만들 수 있습니다.
justify-content
메인 축 방향 정렬입니다. row에서는 가로 정렬, column에서는 세로 정렬을 담당합니다.
align-items
교차 축 방향 정렬입니다. 아이템을 위, 가운데, 아래 또는 stretch 방식으로 배치할 수 있습니다.
align-content
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, 아이템 내부 콘텐츠 길이를 함께 확인하는 것이 좋습니다.
Flexbox의 주축·교차축·줄바꿈을 콘텐츠 흐름에 맞게 익히는 방법
Flexbox 정렬은 화면의 가로·세로가 아니라 flex-direction이 정한 주축과 교차축을 기준으로 동작합니다. 미리보기에서 보기 좋은 조합을 고른 뒤 실제 문서 순서, 키보드 순서와 콘텐츠 확대까지 확인해야 합니다.
대표 활용 상황
- 한 줄 버튼 그룹의 간격과 정렬을 맞출 때
- 여러 카드가 다음 줄로 넘어가는 동작을 시험할 때
- column 방향에서 주축과 교차축이 어떻게 바뀌는지 배울 때
처음부터 결과 확인까지
- 1
아이템이 한 방향으로 흐르는 구성인지 먼저 확인하고 flex-direction을 고릅니다.
- 2
주축의 남은 공간은 justify-content로 배분합니다.
- 3
각 줄 안의 교차축 정렬은 align-items로 조정합니다.
- 4
여러 줄을 허용할 때 flex-wrap을 켜고 align-content의 효과를 비교합니다.
- 5
gap, 패딩, 아이템 크기를 실제 터치 영역과 콘텐츠 길이에 맞춥니다.
- 6
생성 코드를 적용한 뒤 DOM 순서, 키보드 포커스, 200% 확대와 다국어 문구를 검사합니다.
가운데 정렬 빈 상태
- 입력
- row, justify-content:center, align-items:center
- 결과
- 컨테이너 중앙에 모인 한 줄 아이템
주축과 교차축을 모두 가운데로 두지만 컨테이너 높이가 있어야 세로 효과가 보입니다.
줄바꿈 카드 행
- 입력
- row, flex-wrap:wrap, gap:16px
- 결과
- 너비가 부족하면 다음 줄로 넘어가는 카드
아이템 최소 너비와 긴 단어가 실제 화면에서 넘치지 않는지 확인합니다.
계산·처리 기준
선택한 direction, justify-content, align-items, align-content, wrap과 숫자 옵션을 flex 컨테이너 CSS로 조합합니다. 아이템 수와 크기는 미리보기 전용이며 실제 프로젝트의 콘텐츠 크기는 자동 분석하지 않습니다.
알아둘 한계
- order와 역방향 배치는 시각 순서만 바꾸고 DOM·보조기술 순서를 바꾸지 않을 수 있습니다.
- align-content는 여러 줄과 남는 교차축 공간이 있을 때만 효과가 보입니다.
- 긴 단어, 이미지 고유 크기와 최소 콘텐츠 너비는 예시 상자에 반영되지 않습니다.
- Grid가 더 적합한 2차원 레이아웃 여부를 자동 판단하지 않습니다.
개인정보 처리
선택한 레이아웃 값은 브라우저에서만 처리하며 서버로 전송하지 않습니다.
참고 자료
함께 쓰면 좋은 도구
- CSS Grid 생성기
행과 열을 함께 제어하는 2차원 레이아웃을 만듭니다.
- CSS Clamp 생성기
화면에 따라 변하는 간격과 크기를 계산합니다.
자주 묻는 질문
justify-content는 항상 가로 정렬인가요?
아닙니다. flex-direction이 column이면 주축이 세로가 되어 justify-content도 세로 방향에 작용합니다.
align-content가 작동하지 않는 이유는 무엇인가요?
한 줄뿐이거나 교차축에 남는 공간이 없으면 여러 줄 전체를 배치할 공간이 없어 효과가 보이지 않습니다.
row-reverse로 메뉴 순서를 바꿔도 되나요?
시각 순서와 DOM·키보드 순서가 달라질 수 있어 의미 있는 순서는 HTML에서 먼저 구성하는 편이 안전합니다.