CSS Flexbox 생성기
CSS Flexbox 레이아웃을 시각적으로 구성. flex-direction, wrap, justify-content, align-items 등을 라이브 미리보기로 설정. 무료 온라인 도구.
사용 방법
- flex-direction을 조정하여 주축을 설정합니다: row(수평) 또는 column(수직).
- flex-wrap을 설정하여 아이템이 여러 줄로 넘어갈 수 있게 합니다.
- justify-content로 주축의 간격 배치를 구성합니다.
- align-items로 교차축의 정렬 방식을 설정합니다.
- 여러 줄 줄바꿈 동작에는 align-content를 조정합니다.
- 간격을 변경하여 아이템 사이의 거터를 설정합니다.
- 아이템 수로 미리보기 박스를 추가·제거하며 응답을 확인합니다.
- 복사를 클릭하여 생성된
.container { … }규칙을 복사합니다.
생성된 CSS 이해하기
생성기는 일곱 가지 속성을 가진 .container 규칙을 출력합니다:
display: flex, flex-direction, flex-wrap,
justify-content, align-items, align-content,
gap. 스타일시트에 붙여넣고 .container를 자신의 클래스명으로 변경하세요.
Flexbox와 Grid 비교
1차원 레이아웃(단일 행 또는 열을 따른 아이템 배열)에는 Flexbox를 사용합니다. 행과 열을 동시에 제어하는 2차원 레이아웃에는 CSS Grid가 적합합니다. 실제로 Flexbox는 컴포넌트 수준 레이아웃(내비게이션, 버튼 그룹, 폼 행)에 뛰어나고, Grid는 페이지 수준 구조에 더 적합합니다.
FAQ
CSS Flexbox란 무엇인가요?
CSS Flexbox(유연한 박스 레이아웃)는 단일 축(행 또는 열)을 따라 공간을 분배하는 1차원 레이아웃 모델입니다. 내비게이션 바, 툴바, 카드 행, 요소 가운데 정렬, 단일 방향으로 유연하게 배열이 필요한 UI에 이상적입니다.
justify-content와 align-items의 차이는 무엇인가요?
justify-content는 주축(flex-direction으로 정의된 방향)을 따른 정렬을 제어합니다. align-items는 교차축(주축에 수직인 축)을 따른 정렬을 제어합니다. 행 방향 Flex 컨테이너에서 justify-content는 수평 정렬, align-items는 수직 정렬을 제어합니다.
flex-wrap은 언제 사용해야 하나요?
기본 flex-wrap은 nowrap으로, 모든 아이템이 한 줄에 유지되며 필요 시 축소됩니다. flex-wrap: wrap을 설정하면 아이템이 수용되지 않을 때 여러 줄로 넘어갑니다. 작은 화면에서 재배치가 필요한 반응형 카드 그리드나 태그 목록에 유용합니다.
align-content는 무엇을 하나요?
align-content는 여러 줄의 Flex 아이템이 교차축을 따라 분배되는 방식을 제어합니다. 여러 줄이 있을 때(flex-wrap이 wrap 또는 wrap-reverse일 때)만 효과가 있습니다. 단일 줄에서는 눈에 띄는 효과가 없습니다.
Flexbox의 gap 속성이란 무엇인가요?
gap(row-gap과 column-gap의 단축형)은 컨테이너의 바깥 가장자리에 마진을 추가하지 않고 Flex 아이템 사이의 간격을 설정합니다. 원래 Grid 전용 속성이었지만 현재 모든 최신 브라우저의 Flexbox에서 완전히 지원됩니다.