도구스개발

CSS 플렉스박스 생성기

flex-direction·justify-content·align-items 등을 고르면 CSS 플렉스박스 코드를 만들어 주고 결과를 미리 보여줍니다.

px

미리보기

1
2
3
4
5
6

CSS

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
justify-content는 flex-direction이 가리키는 주축을, align-items는 그와 수직인 교차축을 정렬합니다. flex-wrap이 nowrap이면 아이템이 한 줄로만 늘어서 align-content가 효과가 없어 코드에서 뺍니다.
이 도구는 컨테이너(부모) 쪽 속성만 만듭니다. 개별 아이템의 flex-grow·flex-shrink·order 같은 속성은 만들어진 코드에 직접 더하세요.

사용 방법

  1. 1방향(flex-direction)과 줄바꿈(flex-wrap)을 고릅니다.
  2. 2주축 정렬(justify-content)과 교차축 정렬(align-items)을 고릅니다.
  3. 3간격(gap)을 정하고 미리보기로 확인한 뒤 CSS를 복사해 씁니다.

자주 묻는 질문

justify-content는 flex-direction이 가리키는 «주축»을 따라 아이템을 정렬하고, align-items는 그와 수직인 «교차축»을 따라 정렬합니다. flex-direction이 row면 주축은 가로, column이면 주축은 세로로 바뀌어 두 속성이 정렬하는 방향도 함께 뒤집힙니다.

flex-wrap이 nowrap(한 줄)이면 아이템이 애초에 한 줄로만 늘어서 있어 align-content가 아무 효과가 없습니다. wrap이나 wrap-reverse로 여러 줄이 생길 때만 그 줄들 사이의 정렬을 정하는 align-content가 의미를 가지므로, 이 도구도 그때만 코드에 넣습니다.

다릅니다. gap은 아이템 «사이»에만 간격을 주고 컨테이너 바깥쪽 가장자리에는 여백을 만들지 않습니다. 각 아이템에 margin을 따로 주는 것보다 간단하고, 첫·마지막 아이템 앞뒤로 불필요한 여백이 남는 문제도 없습니다.

플렉스박스는 한 방향(행 또는 열)으로 늘어선 아이템의 정렬·분배에 적합하고, 그리드는 행과 열을 동시에 다루는 2차원 레이아웃에 적합합니다. 내비게이션 바나 카드 한 줄처럼 단순한 배치는 플렉스박스, 전체 페이지 레이아웃처럼 격자가 필요하면 그리드를 씁니다.

알아두면 좋은 점

  • flex-direction·flex-wrap·justify-content·align-items·align-content의 값 체계는 MDN 'Basic concepts of flexbox' 문서와 justify-content 문서를 WebSearch로 교차 확인했습니다(2026-09-05). CSS 스펙에 정의된 값이라 이견이 없습니다.
  • 이 도구는 컨테이너(부모) 쪽 속성만 만듭니다. 개별 아이템의 flex-grow·flex-shrink·order 같은 속성은 만들어진 코드에 직접 더하세요.

함께 보면 좋은 도구

CSS 그리드행·열과 간격을 고르면 CSS 그리드 코드를 만들어 주고 결과를 미리 보여줍니다.박스 섀도우 생성오프셋·흐림·퍼짐·색상을 조절해 box-shadow CSS 코드를 만들고 미리보기로 바로 확인합니다.clamp() 생성기뷰포트 너비 구간과 그때의 최소·최대 값을 입력하면 반응형 폰트 크기·여백에 쓸 CSS clamp() 코드를 생성합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.

마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.