在 HTML 中建立 Flexbox 的方式是將父元素的 display 屬性設為 flex，然後在裡面放入子元素;Flexbox 產生器會根據五個封閉集合屬性加上整數像素的間距，為容器產生完全相同的 CSS 宣告區塊。產生器絕不接受任意的樣式文字、嵌入的 HTML、原始選擇器或單位字串。每個關鍵字都會依據 W3C 的 Flexbox 與 Box Alignment 規範進行驗證，並序列化為一個固定的 .container 規則，其中包含 display:flex 以及五個設定的屬性。由於預覽與複製的 CSS 來自同一個經過驗證的具型別狀態，因此這兩種表示方式不會悄悄不一致。這個工具完全在當前的瀏覽器分頁中執行，絕不會上傳你的設定或產生的 CSS，也不會在遠端執行結果。你可以決定哪個元素套用這個規則，以及要在其上疊加哪些響應式或子元素規則。本文將逐步說明該規則搭配使用的 HTML 標記、工具所公開的五個控制項、建立安全容器的確切步驟，以及如何在複製前驗證預覽。
Flexbox 容器在 HTML 中的樣貌
在產生器介入之前，容納 Flexbox 的 HTML 標記既精簡又可預測。你選擇一個父元素，以及任意數量的你想要對齊的子元素。父元素會成為 flex 容器，而每個直接子元素則會成為 flex 項目。產生器所產生的 CSS 只會作用於父元素;子元素則由你自己撰寫。
一個最簡的 HTML 骨架會使用一個帶有 container 類別的父元素，包裹任意數量的子元素。.container 這個類別名稱與產生器輸出的選擇器一致。你可以在自己的樣式表中重新命名，但保持名稱相同能讓你直接原樣貼上輸出結果。項目可以是 div、article、li、button 或任何其他的流動內容 —— 版面引擎不在乎你選擇哪種元素，只要求每個項目都必須是容器的直接子元素。
產生器刻意只專注於容器規則，因為方向、換行、分佈、交錯軸對齊以及項目之間的間距都是在容器規則中決定的。子元素的規則、尺寸以及媒體查詢屬於各專案特有的設定，應放在你自己審閱過的樣式表中，而不是放在通用的容器區塊裡。
產生器公開的五個控制項
Flexbox 產生器公開了剛好五個設定欄位加上一個數值間距。每個欄位都接受取自 W3C 規範的封閉關鍵字清單，因此工具可以在渲染預覽或序列化輸出之前，以確定性的方式進行驗證。下表列出每個控制項及其可接受的值。
| 控制項 | CSS 屬性 | 可接受的關鍵字值 |
|---|---|---|
| 方向 | flex-direction | row, row-reverse, column, column-reverse |
| 換行 | flex-wrap | nowrap, wrap, wrap-reverse |
| 主軸分佈 | justify-content | flex-start, flex-end, center, space-between, space-around, space-evenly |
| 交錯軸對齊 | align-items | stretch, flex-start, flex-end, center, baseline |
| 項目間距 | gap | 從 0 到 100 的整數像素，以 px 表示 |
方向控制項是最具影響力的選擇，因為它決定了主軸。row 會將行內方向設為主軸，因此 justify-content 會以水平方式排列項目。column 會將區塊方向設為主軸，因此同樣的 justify-content 值會以垂直方式排列項目。換行決定項目是維持在單行、形成額外的 flex 行，或是在反向交錯軸方向形成多行。交錯軸對齊會沿著交錯軸將項目定位於每一行內，並接受 baseline，讓文字行無論字型度量為何都能對齊。gap 欄位代表相鄰 flex 項目與 flex 行之間的間距，只接受整數像素值，並會以明確的 px 單位序列化。負數、小數、科學記號、單位文字、像 00 這樣的前導零格式、空輸入，以及超過 100 的值，都會被解析器拒絕，而不是被悄悄強制轉換。
逐步建立容器
這是核心的工作流程。步驟順序與 Flexbox 產生器頁面上的控制項分組方式一致，每一步使用的都是經過驗證的值，預覽也會依據這些值來渲染。
- 在瀏覽器中開啟 Flexbox 產生器。頁面會顯示五個 select 欄位和一個數值間距輸入框，以及一個顯示五個項目的固定預覽區域。
- 選擇方向控制項。水平的話從 row 開始，垂直堆疊的話從 column 開始。reverse 的變體會沿著主軸鏡像排列項目的順序。
- 選擇換行。使用 nowrap 可維持單行，使用 wrap 允許產生新的 flex 行，或使用 wrap-reverse 在反向交錯軸方向上產生新行。
- 選擇主軸分佈。start、center 與 end 值會將項目分別聚集在開頭、中間或結尾。space-between、space-around 與 space-evenly 值則會分配剩餘空間。
- 選擇交錯軸對齊。Stretch 會讓項目填滿交錯軸的尺寸;start、center 與 end 值會將項目對齊到對應的邊緣;baseline 則會對齊文字行。
- 輸入一個從 0 到 100 的整數像素間距。若不要間距就保留 0，或使用 8、12、16、24 作為常見的節奏值。
- 檢視五個項目的預覽。預覽只有在每個欄位都有效時才會更新;無效的間距或任何狀態不一致會讓預覽停留在先前的狀態，並顯示驗證訊息。
- 點擊 Generate CSS。工具會重新驗證目前的完整狀態，然後輸出一個固定順序、剛好包含六個宣告的確定性 .container 區塊。
- 使用複製按鈕複製規則，或手動選取可見的程式碼。若剪貼簿呼叫失敗，CSS 仍會保持可見，讓你仍能手動選取並複製。
對任一 select 或間距的任何編輯，都會立即清除先前產生的 CSS、任何先前的驗證錯誤以及複製成功的確認訊息，讓你永遠不會讀到與目前設定不符的過期輸出。
產生的 CSS 包含(與省略)的內容
產生器刻意輸出一個小而可預測的區塊。確切知道你能得到什麼 —— 以及得不到什麼 —— 能保護你不會誤以為工具提供了它實際上沒有的功能。輸出永遠會以下列這個固定順序包含這六個宣告。
| 永遠包含 | 永遠排除 |
|---|---|
| display: flex | 瀏覽器前綴 (-webkit-, -moz-, -ms-) |
| flex-direction(所選的值) | flex 簡寫、flex-basis、flex-grow、flex-shrink |
| flex-wrap(所選的值) | order 屬性 |
| justify-content(所選的值) | align-content、place-content |
| align-items(所選的值) | 容器尺寸、overflow、min/max 尺寸 |
| gap(所選的值並附帶明確的 px) | 媒體查詢、後援樣式、子選擇器 |
這讓產生器成為一個安全的起點，而不是一套完整的響應式版面系統。一旦這個區塊放進你的樣式表，你就會在其上加入子元素規則、尺寸、響應式覆寫以及書寫模式的考量。.container 區塊的結束大括弧永遠存在，且整個輸出都是純文字，你可以直接貼到任何標準樣式表中，不需要再額外處理。根據 MDN 對於 基本 flexbox 概念的總覽，這六個宣告涵蓋了最常見的容器層級決策;子元素層級的行為則在該頁面的另一處單獨說明。
複製前先讀懂預覽
預覽是一個即時的、固定五個項目的呈現，由同樣經過驗證且具型別的設定所驅動，而間距會以像素明確表示。由於兩種表示方式都來自同一個經過驗證的狀態，將主軸分佈從 flex-start 切換到 space-between，然後產生，永遠會得到一個預覽中項目沿主軸散開的 .container 規則。
預覽使用的是五個固定的本地項目，而不是匯入的標記或內容，這讓控制項與呈現之間的對應關係容易閱讀。實際頁面上的項目尺寸、書寫模式、容器尺寸與可用空間仍會影響相同宣告在實際環境中的呈現，因此請將預覽視為一個忠實但有範圍限制的參考。編輯任何 select 或間距會立即從畫面移除任何先前產生的 CSS 以及任何先前的驗證錯誤;按下產生會在恢復輸出前重新驗證目前的完整狀態。無效的列舉狀態與無效的間距狀態會顯示其實際的錯誤訊息;無效的文字則永遠不會進入內嵌的預覽樣式或被複製的 CSS。
將產生的 CSS 放進你自己的 HTML
一旦你複製了規則，請將它貼到專案的樣式表，並把 .container 類別套用到你 HTML 中的父元素。典型的工作流程如下:開啟產生器、設定五個控制項與間距、產生規則、複製規則、貼到主樣式表中現有 reset 規則的下方，然後指定類別。接著，由你自己撰寫子元素的規則。例如，在工具列中按鈕的情境下，可以將那些子元素規則放在 .container button 之下，這樣你所選擇的交錯軸對齊就能讓它們在視覺上保持一致。
在實際出貨前，請使用真實的內容、真實的書寫模式、真實的視窗大小、瀏覽器縮放以及無障礙設定來測試結果。如果你想要一邊調整標記、一邊預覽旁邊的 CSS，你可以在沙盒化的預覽中編輯 HTML，在不執行程式的情況下查看呈現效果。產生器不會建立檔案、Blob URL、遠端樣式表或嵌入的框架，本機處理也代表你的設定或產生的 CSS 都不會被上傳。請把複製到的區塊當作一個值得信賴的容器起點，並在其上建構響應式、專案特有的規則。
想進一步了解，請參閱建構於瀏覽器解析器之上的 HTML 清理工具替代方案。