Flexbox 플레이그라운드 사용 방법
방향, 주축·교차축 정렬, 줄바꿈, 간격과 항목 수를 선택합니다.
결과에서 확인할 내용
선택값이 적용된 배치와 복사 가능한 Flexbox CSS를 보여줍니다.
이 도구가 필요한 상황
정렬 방향과 축별 배치를 바꿔가며 Flexbox가 여러 요소를 어떻게 놓는지 즉시 확인합니다.
실제 사용 예시
row 방향에서 justify-content:center는 가로축 가운데 정렬이지만 column 방향에서는 세로축 가운데 정렬입니다. align-items는 그와 직각인 축을 조정합니다.
결과를 정확히 읽는 방법
- 주축은 flex-direction에 따라 달라집니다.
- 줄바꿈을 켜면 한 줄의 정렬과 여러 줄 전체의 정렬을 구분해야 합니다.
- 실제 카드 폭과 긴 텍스트가 들어가면 미리보기와 간격이 달라질 수 있습니다.
완료 전 확인
복사한 CSS를 실제 컨테이너에 적용하고 긴 제목·작은 화면에서 줄바꿈을 검수하세요.
더 자세히 알아보기px와 rem 차이: 반응형 CSS에서 글자 크기 단위 고르는 법 →
사용 전 꼭 확인하세요
자식 요소의 크기와 flex-grow 설정에 따라 실제 프로젝트 결과는 달라질 수 있습니다.
도구 설명 최종 수정: 2026년 10월 9일