📐 CSS Flexbox 생성기

사용법

1. 위쪽 프리셋 버튼(가운데 정렬, 네비게이션, 카드 줄바꿈 등)을 눌러 시작하거나, 각 선택 칸에서 값을 직접 골라요.
2. 미리보기 상자의 번호 박스가 어떻게 배치되는지 확인하면서 방향, 줄바꿈, 주축 정렬(justify-content), 교차축 정렬(align-items), 간격(gap)을 바꿔 보세요. 박스 수도 바꿀 수 있어요.
3. 오른쪽 CSS 코드는 기본값과 같은 속성을 빼서 짧게 만들어 줘요. copy 버튼으로 복사해 붙여 넣으세요.

Flexbox의 핵심: 주축과 교차축

Flexbox는 한 줄(또는 한 열) 안에서 아이템을 배치하는 CSS 레이아웃 방식이에요. 부모에 display: flex를 쓰면 자식들이 아이템이 되고, 두 개의 축으로 움직여요. 주축(main axis)은 flex-direction이 정하는 방향(row면 가로, column이면 세로)이고, 교차축(cross axis)은 주축과 수직이에요. 헷갈리는 justify-content와 align-items는 이 축으로 구분해요. justify-content는 주축 방향 정렬, align-items는 교차축 방향 정렬이에요. row 방향이면 justify-content는 좌우, align-items는 위아래를 맡고, column으로 바꾸면 역할이 서로 바뀌어요.

속성별 값 정리

자주 쓰는 패턴

1. 가운데 정렬

가로·세로 가운데 정렬은 부모에 아래 세 줄이면 끝나요. 부모에 높이가 있어야 세로 가운데가 의미가 있어요.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 네비게이션 (로고 왼쪽, 메뉴 오른쪽)

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

justify-content: space-between은 첫 아이템을 왼쪽 끝, 마지막 아이템을 오른쪽 끝에 붙이고 나머지를 사이에 균등 분배해요. 아이템이 두 개뿐이면 양끝 배치가 돼요.

3. 줄바꿈되는 카드 목록

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}

flex-wrap: wrap이 있어야 아이템이 넘칠 때 다음 줄로 내려가요. 이때는 align-content로 줄 묶음의 위치를 정할 수 있어요. 카드 폭은 보통 flex: 1 1 200px처럼 자식에 최소 폭을 줘서 화면 크기에 따라 개수가 자동으로 바뀌게 해요.

4. 세로 스택

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

5. 사이드바 + 본문

사이드바는 고정 폭(width: 240px)으로 두고 본문에 flex-grow: 1을 주면 남는 공간을 본문이 모두 차지해요. 이 생성기의 "아이템 1 flex-grow" 값을 1로 올리면 첫 박스가 남는 공간을 차지하는 모습을 확인할 수 있어요.

아이템에 쓰는 속성: flex, align-self, order

부모 설정만으로 부족할 때 자식에게 개별 속성을 줄 수 있어요. flex는 flex-grow flex-shrink flex-basis를 한꺼번에 쓰는 축약형이에요. flex: 1은 남는 공간을 같은 비율로 나눠 갖고, flex: 0 0 200px은 늘지도 줄지도 않는 200px 고정 폭이에요. align-self는 해당 아이템만 교차축 정렬을 다르게 지정하고(예: 부모는 center인데 한 아이템만 flex-end), order는 HTML 순서를 바꾸지 않고 화면에서의 순서만 바꿔요. 다만 order로 시각 순서만 바꾸면 키보드 탐색 순서와 어긋나 접근성 문제가 생길 수 있으니 꼭 필요할 때만 쓰세요.

반응형으로 만들 때는 모바일에서 flex-direction: column, 넓은 화면에서 row로 바꾸는 방식을 가장 많이 써요. 미디어 쿼리로 방향만 바꿔도 같은 마크업으로 두 가지 레이아웃을 만들 수 있고, 이 생성기에서 방향을 바꿔 보며 어떻게 보일지 확인할 수 있어요. 간격은 gap, 폭은 flex-basis, 줄바꿈은 wrap으로 역할을 나누면 코드가 단순해져요.

미리보기가 보여 주는 것

미리보기의 박스는 일부러 크기가 서로 다르게 했어요(번호에 따라 안쪽 여백이 달라요). 크기가 같으면 align-items의 차이가 잘 안 보이기 때문이에요. stretch는 가장 큰 박스에 맞춰 늘리지 않고 컨테이너 높이까지 채우고, center는 가운데, baseline은 글자 기준선으로 정렬하는 모습을 확인해 보세요. wrap을 켠 뒤 아이템 수를 12개로 늘리면 align-content가 줄 묶음의 위치를 어떻게 바꾸는지 볼 수 있어요.

Flexbox 대신 Grid를 쓸 때

Flexbox는 한 방향(1차원) 배치에 알맞아요. 메뉴 줄, 버튼 묶음, 카드 한 줄 같은 곳이에요. 행과 열을 동시에 맞춰야 하는 2차원 격자(갤러리, 대시보드, 폼 레이아웃)는 CSS Grid가 더 적합해요. 둘은 함께 쓰는 경우도 많아요. 큰 레이아웃은 Grid로, 카드 안쪽 정렬은 Flexbox로 잡는 식이에요.

자주 겪는 문제

• 세로 가운데가 안 돼요: 부모 높이가 콘텐츠 높이와 같으면 가운데로 보낼 공간이 없어요. min-height: 100vh처럼 높이를 주세요.
• 아이템이 줄어들어 찌그러져요: 기본값 flex-shrink: 1 때문이에요. 줄어들지 않게 하려면 flex-shrink: 0을 주거나 wrap을 켜세요.
• justify-content가 안 먹어요: 아이템이 이미 부모 폭을 꽉 채우고 있으면 정렬할 남는 공간이 없어요. 폭을 줄이거나 flex-grow를 확인하세요.
• align-content가 안 먹어요: 한 줄(nowrap)일 때는 효과가 없어요. flex-wrap: wrap에서만 쓰여요. 이 생성기도 nowrap일 때는 align-content를 코드에 넣지 않아요.
• gap이 오래된 브라우저에서 안 돼요: 최근 브라우저는 모두 지원하지만 구형 환경이 필요하면 아이템 margin으로 대체하세요.

값 목록은 MDN Web Docs의 CSS Flexible Box Layout 문서 기준이에요. 미리보기는 이 브라우저에서 바로 그려지고 입력값은 밖으로 나가지 않아요.

자주 묻는 질문

관련 도구