CSS Flexbox 생성기 — 시각적 레이아웃 도구

Flexbox는 CSS 레이아웃을 근본적으로 바꿨습니다. 복잡한 정렬과 반응형 레이아웃을 몇 줄의 코드로 구현할 수 있습니다.

핵심 Flexbox 속성

컨테이너 속성

• display: flex: Flex 컨테이너 활성화
• flex-direction: row, column, row-reverse, column-reverse
• justify-content: 주 축 정렬 (flex-start, center, space-between 등)
• align-items: 교차 축 정렬
• flex-wrap: 줄바꿈 여부
• gap: 항목 간격

아이템 속성

• flex-grow: 남은 공간 차지 비율
• flex-shrink: 공간 부족 시 축소 비율
• flex-basis: 기본 크기
• align-self: 개별 아이템 정렬

일반적인 Flexbox 패턴

• 네비게이션 바 (로고 좌측, 메뉴 우측)
• 카드 그리드
• 수직 중앙 정렬
• 등간격 아이콘 행