Flexbox 생성기

시각적으로 Flexbox 레이아웃을 조정하고 CSS 코드를 생성하세요.

사용 방법

•컨테이너 방향 선택 (행, 열, 역행, 역열)
•줄바꿈 속성 선택 (nowrap, wrap, wrap-reverse)
•justify-content 속성 조정 (flex-start, center, space-between 등)
•align-items 속성 조정 (stretch, center, flex-start 등)
•CSS 코드가 자동으로 미리보기 영역에 생성됩니다
•"복사"를 클릭하여 CSS 코드를 클립보드에 복사

방향 (flex-direction)

콘텐츠 정렬

아이템 정렬

플렉스 랩

간격: 10px

항목 수: 3

Preview

1

2

3

CSS 코드

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

FAQ

관련 도구

CSS 그라데이션 생성기

시각적으로 선형 및 방사형 CSS 그라데이션을 생성하세요.

CSS 박스 그림자 생성기

시각적으로 CSS 박스 그림자 코드를 생성하세요.

색상 변환기

HEX, RGB, HSL, HSV 색상 형식을 변환하세요.

피드백

피드백

이름

CAPTCHA *