Flexbox 생성기

CSS Flexbox 레이아웃을 시각적으로 만듭니다

flex-direction 4종, justify-content 6종, align-items 5종, flex-wrap 3종을 버튼으로 골라 가며 아이템 1~12개가 실제로 어떻게 배치되는지 바로 봅니다. gap 값도 슬라이더로 조절되어 간격까지 포함한 컨테이너 CSS가 완성된 형태로 나옵니다. CSS를 처음 배우는 사람이 주축과 교차축 개념을 몸으로 익히는 데도, 숙련자가 space-between과 space-evenly의 차이를 잠깐 확인하는 데도 쓰입니다. 인터넷 연결을 끊어도 동작하니 강의 자료로 띄워 두기에도 좋습니다.

flex-direction

justify-content

align-items

flex-wrap

Gap 10px

아이템 개수 5

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
}

Flexbox, 이렇게 쓰세요

flex-direction, justify-content, align-items, gap, wrap 을 클릭으로 바꾸며 실제 배치를 확인하고 CSS를 복사합니다.

가로 정렬·수직 중앙 배치·양끝 정렬처럼 자주 헷갈리는 Flexbox 속성을 눈으로 확인하고 싶을 때 씁니다.

justify-content 는 주축, align-items 는 교차축 기준입니다. flex-direction: column 이면 두 속성의 역할이 뒤바뀝니다.

자주 묻는 질문

Q. 아이템 하나만 오른쪽 끝으로 보내려면?

그 아이템에 margin-left: auto 를 주면 됩니다. justify-content 를 바꾸지 않아도 됩니다.

Q. Grid와 무엇이 다른가요?

Flexbox는 한 방향(행 또는 열) 정렬에, Grid는 행·열을 동시에 다루는 2차원 배치에 적합합니다.

Q. 아이템 개별 속성(flex-grow, order)도 만들 수 있나요?

이 도구는 컨테이너 속성만 다룹니다. 특정 아이템을 늘리려면 생성된 코드에 .item { flex: 1 } 처럼 자식 규칙을 따로 추가하세요.