CSS Flexbox 생성기

컨테이너 속성

아이템 속성

flex: 1 트릭

flex: 1은 flex: 1 1 0%의 단축형입니다. 아이템이:

• 남은 공간을 채우도록 늘어나고(grow: 1)
• 필요하면 줄어들며(shrink: 1)
• 0 크기에서 시작합니다(basis: 0%)

동일한 너비의 컬럼이라면 모든 아이템에 flex: 1을 주면 완벽하게 균등 분할됩니다. 콘텐츠보다 작아지면 안 되는 사이드바라면 flex: 0 0 240px(grow/shrink 없음, basis 240px)를 사용하세요.

자주 쓰는 패턴

가운데 정렬 히어로

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

좌측 로고, 우측 링크의 내비게이션 바

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* 오른쪽으로 밀기 */
  display: flex;
  gap: 1rem;
}

반응형 카드 줄

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 줄바꿈 전 최소 260px */
}

입력이 가변이고 버튼이 고정인 폼 필드

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

• Flexbox: 1차원(행 또는 열). 아이템 크기가 콘텐츠 기반이거나 단일 라인을 따라 공간을 분배할 때 가장 좋습니다.
• Grid: 2차원(명시적인 행과 열 트랙). 행과 열 구조가 동시에 있는 레이아웃에 가장 좋습니다.

내비게이션 바나 카드 스택은 Flexbox, 여러 행이 정렬된 제품 카드 그리드는 CSS Grid. 실제 페이지의 대부분은 두 가지를 함께 씁니다, Grid 페이지 레이아웃 안에 Flexbox 컴포넌트.

자주 만나는 함정

• 아이템이 컨테이너를 채우지 않음: 기본 align-items: stretch는 아이템에 고정 height가 없을 때만 적용됩니다. 명시적 height가 있으면 그 크기를 유지합니다.
• gap이 안 먹힘: 브라우저 지원을 확인하세요. Flex gap은 늦게 들어왔고 Safari 14.1 미만에서는 미지원이었습니다. 2024년 이후로는 보편적입니다.
• 컬럼 flex의 자식이 줄어듦: flex 컬럼의 기본값 align-items: stretch가 자식을 컨테이너 너비로 늘립니다. 자식이 width를 지정하면 이를 깨고 나옵니다.
• order는 시각적일 뿐: 스크린 리더와 키보드 내비게이션은 DOM 순서를 따릅니다. 콘텐츠 의미를 바꾸기 위해 order를 쓰지 마세요. 시각적 다듬기에만 사용합니다.