CSS Flexbox 실습장

기능

컨테이너 속성 패널

항목 추가/삭제

항목별 개별 설정

레이아웃 실시간 미리보기

CSS 코드 생성

사용 방법

1. 컨테이너 속성을 조정하세요.

2. 플렉스 아이템을 추가하거나 제거하세요.

3. 레이아웃이 실시간으로 업데이트되며 CSS를 복사할 수 있습니다.

이 도구에 대하여

Flexbox는 요소를 한 축, 즉 행이나 열을 따라 배치하고 그 사이의 공간을 나눠 줍니다. 까다로운 점은 몇몇 속성이 서로 영향을 준다는 것입니다. flex-direction이 주축을 정하고, justify-content는 주축 방향 정렬, align-items는 교차축 방향 정렬, flex-wrap은 줄바꿈 여부, gap은 일정한 간격을 정합니다. 이 플레이그라운드에서는 속성을 바꿀 때마다 색깔 상자가 즉시 다시 배치되므로 감을 익히거나 말을 듣지 않는 레이아웃을 점검하기에 가장 빠른 방법입니다. 항목 개수를 바꿔 줄바꿈을 시험해 보고, 생성된 컨테이너 CSS를 복사하세요. 행과 열을 모두 맞춰야 하는 2차원 레이아웃에는 보통 CSS Grid가 더 적합합니다.

자주 묻는 질문

justify-content와 align-items는 어떻게 다른가요?

justify-content는 flex-direction이 정한 주축을 따라 항목을 배치하고, align-items는 교차축에서의 위치를 정합니다. 행 방향에서는 justify-content가 가로, align-items가 세로를 맡고, 열 방향에서는 역할이 바뀝니다.

justify-content가 아무 효과가 없어 보이는 이유는 무엇인가요?

주축에 남는 공간이 있을 때만 효과가 있습니다. flex: 1이나 큰 너비 때문에 항목이 이미 컨테이너를 채우고 있다면 나눌 공간이 없습니다.

margin 대신 gap을 써야 할 때는 언제인가요?

gap은 항목 사이에만 간격을 넣고 바깥 가장자리에는 넣지 않으며, 행과 줄바꿈된 줄 모두에 적용됩니다. margin보다 간단하고 예측하기 쉬우며 현재 모든 브라우저에서 flexbox에 쓸 수 있습니다.

flex-wrap은 무엇을 바꾸나요?

nowrap이면 항목이 한 줄에 머물며 필요하면 줄어듭니다. wrap이면 공간이 부족할 때 다음 줄로 넘어가고, wrap-reverse는 그 줄들을 반대 방향으로 쌓습니다.

Flexbox와 Grid 중 무엇을 써야 하나요?

내비게이션 바, 버튼 묶음, 가운데 정렬 같은 1차원 배치에는 Flexbox를, 카드 갤러리나 페이지 레이아웃처럼 행과 열을 모두 맞춰야 할 때는 Grid를 쓰세요.

기능

사용 방법

이 도구에 대하여

자주 묻는 질문

관련 도구