CSS Flexbox 생성기

CSS 플렉스박스 레이아웃을 실시간 미리보기와 함께 시각적으로 생성하세요.

1
2
3
4

컨테이너 속성

#f0f0f0

미리보기에서 아이템을 클릭하면 개별 flex 속성을 편집할 수 있습니다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}
모든 레이아웃 생성은 브라우저에서 처리됩니다. 데이터가 서버로 전송되지 않습니다.

사용 방법

  1. 1

    컨테이너 속성 설정

    flex-direction, flex-wrap, justify-content, align-items, gap을 선택하여 전체 레이아웃을 제어하세요.

  2. 2

    아이템 수 조정

    표시할 flex 아이템 수(1-12)를 설정하고 컨테이너 높이와 배경색을 커스터마이즈하세요.

  3. 3

    개별 아이템 편집

    미리보기에서 아이템을 클릭하여 flex-grow, flex-shrink, flex-basis, order, align-self 속성을 설정하세요.

  4. 4

    CSS 복사

    생성된 CSS가 실시간으로 업데이트됩니다. 복사 버튼으로 클립보드에 복사하세요.

자주 묻는 질문

CSS Flexbox란?
CSS Flexbox는 컨테이너 내 아이템 간 공간을 배분하기 위한 1차원 레이아웃 모델입니다.
Flexbox와 Grid 중 언제 사용하나요?
1차원 레이아웃에는 Flexbox를, 2차원 레이아웃에는 CSS Grid를 사용하세요.
flex-grow는 무엇인가요?
flex-grow는 여유 공간이 있을 때 아이템이 다른 아이템 대비 얼마나 늘어나는지를 제어합니다.
데이터가 안전한가요?
네. 모든 레이아웃 생성은 JavaScript를 사용하여 브라우저에서 완전히 처리됩니다.