AlpaKit / design / CSS Flexbox 및 Grid 레이아웃 생성기

CSS Flexbox 및 Grid 레이아웃 생성기

CSS Flexbox 및 Grid 그리드 레이아웃을 시각적으로 조율 및 프리뷰하고, 코드와 애니메이션을 즉시 생성합니다。

아이템 개수

배치 방향 (flex-direction)

주축 정렬 (justify-content)

교차축 정렬 (align-items)

줄바꿈 설정 (flex-wrap)

아이템 간격 (gap) 12px

Live Preview Container

CSS 코드

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

HTML 코드

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>