跳至主要內容
Lizely

Flexbox 生成器

設定五項核心 Flexbox 控制項，檢視固定多項預覽，並複製確定性的 CSS，無需任意樣式輸入。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.選擇彈性方向、換行模式、主軸分佈以及交叉軸項目對齊方式。
  2. 2.輸入從 0 到 100 的整數像素間距，並檢查五個固定的預覽項目。
  3. 3.產生已驗證的 .container 規則，然後複製或手動選取可見的程式碼。

關於Flexbox 生成器

flexbox 產生器為單一彈性容器建立專注的 CSS 宣告區塊。選擇彈性方向、彈性包裝、主要軸線對齊、交叉軸對齊，以及從 0 到 100 的整數像素間距。當所有欄位皆有效時，五個項目預覽才會更新。產生 CSS 後，會產生一個可選取或複製的 .container 規則。預覽與複製的宣告均源自相同驗證過的設定，因此兩者不會靜默使用不同的值。該工具絕不接受任意的屬性名稱、選擇器、URL、片段或可執行的樣式文字。關鍵字清單為 W3C 強韌盒與盒對齊規範的閉合子集。方向支援行向、行反向、列向與列反向。包裝支援 nowrap、wrap 與 wrap-reverse。主要軸線分佈支援 flex-start、flex-end、center、space-between、space-around 與 space-evenly。交叉軸項目對齊支援 stretch、flex-start、flex-end、center 與 baseline。每個選取的值在輸出至預覽樣式物件或產生文字前，都會再次驗證其是否在清單內。彈性佈局有主要軸與交叉軸之分。 flex-direction 設定主要軸線與排列順序，因此 justify-content 在普通行項目中為水平方向，而在列項目中為垂直方向。align-items 則作用於項目所在每個 flex 行的橫軸方向。flex-wrap 決定項目是否保持在單一行、形成新行，或在反向橫軸方向形成新行。預覽使用五個固定的本機項目，因此無需匯入標籤或內容即可探索這些互動。項目大小、書寫模式、容器尺寸與可用空間仍會影響實際佈局。gap 欄位代表相鄰 flex 項目與 flex 行之間的間距。這個產生器故意只接受 base-10 的整數，且隱含 px 單位。零與 100 是被接受的。負值、小數、科學記數法、單位文字、空輸入、CSS 記號、前導零形式如 00，以及超過 100 的值都會被拒絕。超出支援範圍的數值會被報告，而非被壓縮為 100。原始 gap 文字限制為 32 UTF-16 碼元；精確邊界輸入會被處理，而較長的輸入則會失敗且不進行截斷。 預覽接收由相同驗證數值間距串成的明確 px 字串。產生輸出永遠包含恰好六個宣告：display:flex 加上五個設定的屬性。宣告名稱與順序皆固定。該產生器不會輸出廠商字首、子 flex 縮寫、flex-basis、grow 或 shrink 因子、order、align-content、place-content、尺寸、overflow、媒體查詢或備援設定。它僅作為安全的容器起點，而非完整的響應式佈局系統。將這些宣告複製到內容或尺寸不同的容器中，可能會自然產生與示範不同的包裝行為。編輯任何選項或間距後，會立即移除先前產生的 CSS，並顯示驗證錯誤與複製確認。每次產生都會先驗證完整當前狀態，再恢復輸出。不合法的列舉狀態與不合法的間距狀態會顯示實際的驗證訊息；任何不合法的輸入文字皆不會傳遞至內聯樣式或複製的 CSS。剪貼簿 API 是非同步的。每次複製都會取得一個產生識別碼，任何編輯、產生、之後的複製或元件解除安裝都會使舊的完成狀態無效。 當確認時間計時器被取代或解除安裝時會被清除，並在觸發後自行清除其參考。失敗的複製會讓完整的 CSS 可見，以便手動選取。所有驗證、預覽渲染、序列化以及剪貼簿操作均在當前瀏覽器分頁的本機狀態中進行。沒有設定或產生的 CSS 會上傳至 Lizely。這個工具不會產生檔案、Blob URL、遠端樣式表、嵌入式框架或動態執行的 CSS 字串。請在自己的審核過的樣式表中使用結果，並在那裡新增子規則與響應式限制，再使用真實內容、寫入模式、視口大小、縮放與存取性設定進行測試後才釋出。

方法與來源

將每個支援的 CSS 關鍵字儲存在一個封閉且不可變的列舉中，並在使用前再次驗證所有字串。使用嚴格的 base-10 整數語法解析間隙，接受 0 到 ZXQT或其他 100 包含的範圍，並在超出 32 編碼單位的原始文字時失敗，不進行截斷或上限限制。序列化一個固定的 .container 塊，包含 display:flex、flex-direction、flex-wrap、justify-content、align-items 和 gap。從與之完全相同的驗證過的型別設定建立即時預覽，並明確以 px 表達 gap。編輯會清除先前的輸出和錯誤。剪貼簿任務使用產生和活躍防護機制加上計時器清理，以防止過時的非同步完成無法恢復複製的狀態。八種可執行的黃金組合涵蓋每個支援的關鍵字、間隙邊界、輸出順序、預覽一致性、列舉唯一性、錯誤值以及 CSS 的注入嘗試。

常見問題

正對齊與側對齊之間的差異為何？
justify-content 將項目沿著 flex-direction 所建立的主要軸線分佈。align-items 則在每個 flex 行內將項目沿著橫軸定位。
為何改變 flex-direction 會改變對齊方向？
行方向會使內聯方向成為主要軸線，而列方向則會使區塊方向成為主要軸線。justify-content 會依照這個主要軸線進行操作。
我可以輸入除了像素之外的 CSS 單位嗎？
不可以。這個專注產生器只接受 0 到 100 之間的整數像素間距，並拒絕單位文字，而不是將其插入到 CSS。
複製的 CSS 會上傳或遠端執行嗎？
不會。驗證、預覽、序列化和剪貼簿複製都會在當前瀏覽器分頁的本機端進行。

相關工具

開發者工具 使用指南

查看全部