CSS Flexbox 생성기
CSS Flexbox 생성기로 컨테이너의 flex-direction, justify-content, align-items, flex-wrap, align-content, gap을 설정하고, 최대 20개 항목을 실시간으로 미리 보며, 생성된 CSS를 복사할 수 있습니다.
px
이 도구 소개
CSS Flexbox 생성기로 컨테이너의 flex-direction, justify-content, align-items, flex-wrap, align-content, gap을 설정하고, 최대 20개 항목을 실시간으로 미리 보며, 생성된 CSS를 복사할 수 있습니다.
사용 방법
- 방향과 줄바꿈을 선택합니다.
- justify-content와 align-items를 설정합니다(여러 줄일 때는 align-content도).
- gap과 미리보기 항목 수를 설정합니다.
- CSS 복사를 눌러 컨테이너 규칙을 사용합니다.
알아두면 좋은 점
- justify-content는 주축을 따라 항목을 정렬하고, align-items는 교차축에서 정렬합니다.
- flex-direction: column을 쓰면 축이 바뀌어 justify-content가 세로로 작동합니다.
- align-content는 항목이 여러 줄로 줄바꿈될 때만 효과가 있습니다.
- gap 속성은 현재 모든 주요 브라우저의 Flexbox에서 작동합니다.
- Flexbox는 1차원 레이아웃입니다. 행과 열을 동시에 다루려면 CSS Grid를 쓰세요.
모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.
자주 묻는 질문
Flexbox로 div를 가운데 정렬하려면 어떻게 하나요?
부모에 display: flex; justify-content: center; align-items: center;를 지정하면 자식이 가로세로 모두 가운데에 놓입니다.
justify-content와 align-items는 어떻게 다른가요?
justify-content는 주축(기본값은 행)을 따라 항목을 배분하고, align-items는 교차축을 따라 항목의 위치를 정합니다.
Grid 대신 Flexbox를 써야 할 때는 언제인가요?
내비게이션 바나 버튼 줄 같은 1차원 레이아웃에는 Flexbox를, 2차원 페이지 레이아웃에는 Grid를 쓰세요.
align-content가 아무 효과가 없는 이유는 무엇인가요?
align-content는 flex-wrap으로 항목이 두 줄 이상으로 줄바꿈될 때만 적용됩니다.