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>