CSS Flexbox 產生器
在您的瀏覽器中本機執行以視覺化方式建立 Flexbox 版面並複製 CSS、HTML 或 Tailwind
即時預覽
主軸 →
交錯軸 ↓
主軸 → · 交錯軸 ↓ · row / nowrap
斜線區域表示 gap 間距: 列間距 12px · 欄間距 12px
原始 = 在 HTML 中的位置。order = CSS order，只改變視覺排列。
3/24 · 最多 24 個項目。
輔助線顯示軸線、原始碼位置、CSS order 與 gap 間距，不會被匯出。
產生的程式碼
.flex-container 是容器規則；.flex-item-N 是第 N 個項目的規則。 目前選取的項目：.flex-item-1
/* Sample box styles that match the preview */
.flex-container {
box-sizing: border-box;
padding: 12px;
border-width: 1px;
border-style: dashed;
border-color: #94a3b8;
border-radius: 8px;
}
.flex-item {
box-sizing: border-box;
margin: 0;
padding: 12px 16px;
border-width: 2px;
border-style: solid;
font-size: 14px;
line-height: 20px;
border-color: #6366f1;
border-radius: 6px;
background: #eef2ff;
color: #1e1b4b;
}
/* Flexbox layout */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
width: 100%;
height: 220px;
}
.flex-item.flex-item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
.flex-item.flex-item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;
align-self: auto;
}
編輯時程式碼即時更新。
完全在瀏覽器本機執行。版面設定可能儲存在此裝置的瀏覽器儲存空間。
CSS Flexbox 產生器
以視覺方式建立 Flexbox 版面，並複製可用於正式環境的 CSS、HTML 或 Tailwind 類別。
使用方式
選擇預設集或調整容器。點擊或用鍵盤選取項目來編輯 flex-grow、flex-shrink、flex-basis、order 與 align-self。新增、移除與重新排序項目，然後複製或下載 CSS、HTML + CSS 或 Tailwind。
視覺化學習輔助
輔助線依目前方向與換行繪製主軸與交錯軸，為每個項目標示原始位置與 CSS order，並以斜線標出項目與行之間的 gap 間距。
限制與隱私
最多 24 個項目。長度接受非負的 px、rem、em、%、vw 與 vh 值；不接受 calc() 與自訂 CSS。預覽假設為水平、由左至右的書寫模式。所有處理都在瀏覽器中完成，設定可能儲存在本機儲存空間。
