強制 flex 容器以水平方向流動代表將 flex-direction 設定為 row，這會將行內方向設為主軸，預設由左至右排列項目，並透過 justify-content 屬性來控制沿著該水平軸的分布。實際上，每個水平 flexbox 排版都是由項目所組成的一列，其寬度由內容或其他 flex 屬性決定，而間距則由 space-between 等 justify-content 值控制，或在相鄰項目和 flex 線之間套用明確的 gap 值決定。align-items 屬性仍然垂直於該列運作，因此它控制的是每條 flex 線內部的垂直對齊，而非水平分布。當 flex-direction 設定為 row 時，項目預設會容納在單一行內，並在溢位時自動縮小，除非將 flex-wrap 變更為 wrap 或 wrap-reverse。將方向改為 column 會把同一個 justify-content 變成垂直控制，這是所謂的水平排版在正式環境中看起來不像水平的最常見原因。若要建立行為可預測的水平排版，請將 flex-direction 設為 row、選擇一種換行模式、挑選一個主軸分布方式、決定交叉軸的項目對齊，若希望便於相鄰項目之間擁有明確的間距，則設定一個整像素的 gap。
是什麼讓 Flexbox 排版呈現水平
Flexbox 使用兩條永遠同時存在的垂直軸線。主軸是項目排列的方向，交叉軸則是另一個方向。flex-direction 決定哪個實體方向成為主軸。將 flex-direction 設為 row 會把行內的、水平的方向設為主軸，並由左至右排列項目；row-reverse 使用相同的水平軸，但反轉項目順序。flex-direction 的預設值就是 row，因此一個未明確指定方向的新 flex 容器已經是水平排列──常見的混淆來自於開發者原本想要垂直堆疊而改用 column，卻忘記改回來。
一旦主軸為水平，justify-content 就會沿著該軸分布項目：flex-start 將項目靠左對齊、flex-end 將其靠右對齊、center 將整組置中，而 space-* 等值則以不同方式填滿剩餘空間。接著 align-items 垂直於該列運作，控制項目在行內的垂直位置，其中 stretch 填滿行高、center 垂直置中、baseline 則對齊項目的文字基線。這種組合正是大多數讀者所說的水平排版：項目位於同一行，具有明確的水平間距，並對其頂端、中心或基線進行垂直對齊。
gap 屬性建立在這個軸線行為之上，會在相鄰的 flex 項目之間以及各 flex 線之間加上相等的間距。當主軸為水平時，gap 會影響同一行項目之間的水平空間，以及換行後各行之間的垂直空間。Flexbox Generator 只接受 0 到 100 之間的整像素 gap 值，這已足夠用於測試常見的水平間距，無需引入額外的單位或計算值。
如何逐步建立水平 Flex 容器
產生正確水平排版的最快方式，是明顯地設定這五個核心控制項，而不是依賴預設值。Flexbox Generator 會逐一引導您設定每個控制項，使用五個固定的項目預覽結果，並產生一段可以複製到您自己樣式表中的六行規則。
- 開啟 Flexbox Generator，對於標準水平排版請選擇 flex-direction 為 row，或選擇 row-reverse 以維持水平軸但反轉項目順序。
- 選擇換行模式：若要單一水平行並在項目溢位時縮小項目，請保留為 nowrap；若希望項目能流向其他水平行，則將其設為 wrap 或 wrap-reverse。
- 從 flex-start、flex-end、center、space-between、space-around 或 space-evenly 中選擇一個主軸分布方式，以控制項目的水平位置。
- 從 stretch、flex-start、flex-end、center 或 baseline 中選擇一個交叉軸對齊方式，以控制項目在每行內部的垂直位置。
- 輸入一個 0 到 100 之間的整像素 gap，以設定相鄰項目之間以及各行之間的間距，然後在每個欄位都有效後，五個固定的預覽項目才會更新。
- 點擊 Generate 產生經過驗證的 .container 規則，然後可以透過剪貼簿控制項複製結果，或手動選取顯示的程式碼區塊進行手動貼上。
預覽與複製出來的 CSS 來自完全相同的驗證設定，因此貼到您樣式表中的規則不會與畫面上顯示的內容出現無聲的差異。編輯任何欄位都會清除先前產生的輸出、驗證錯誤以及複製確認訊息，必須再次執行 Generate 才會出現新的輸出。
您可以選擇的方向、換行與分布值
這個產生器使用一組來自 W3C Flexbox 與 Box Alignment 規範的 CSS 關鍵字封閉列舉。每個 select 只接受下方列出的值，任何其他字串都會在預覽渲染前被拒絕。下表列出支援的主軸分布關鍵字，以及它們對一個 row 的水平效果，這也是大多數人想要控制項目如何沿著一行分布時最常用到的屬性。
| justify-content 關鍵字 | 對一個 row 的水平效果 |
|---|---|
| flex-start | 項目按照來源順序靠容器左邊緣排列。 |
| flex-end | 項目按照來源順序靠容器右邊緣排列。 |
| center | 項目集中成一組並在容器內水平置中。 |
| space-between | 第一個項目靠左邊緣，最後一個靠右邊緣，剩餘空間平均分配給其餘項目之間。 |
| space-around | 每個項目的兩側各獲得相等的半間距，因此項目之間的間距會是外緣間距的兩倍。 |
| space-evenly | 所有間距——包括項目之間以及項目與容器邊緣之間——完全相同。 |
方向接受 row、row-reverse、column 和 column-reverse；換行接受 nowrap、wrap 和 wrap-reverse；align-items 接受 stretch、flex-start、flex-end、center 和 baseline。Gap 僅接受介於 0 到 100 之間的整數，書寫時不帶單位、小數點、科學記號或像 00 這樣的前導零。超過 100 的值會被回報而非被截斷，超過 32 個 UTF-16 程式碼單位的原始文字會失敗而不會被截斷，因此過大的剪貼簿承載量或貼上意外不會悄悄地變成別的東西。
當 row 切換時 justify-content 與 align-items 的行為
Flexbox 將其主軸和交叉軸定義為相對於 flex-direction，這表示同一個關鍵字會依容器是 row 或 column 而產生不同的視覺結果。MDN 上關於基本 flexbox 概念的參考資料直接說明了這種配對：當 flex-direction 為 row 時，主軸為水平，justify-content 由左至右分布項目；當 flex-direction 為 column 時，主軸為垂直，同一個 justify-content 則會由上至下分布項目。MDN 的基本 flexbox 概念指南是內化這種交換最有用的地方。
align-items 永遠作用於交叉軸，因此在水平 row 中它控制行內的垂直位置，而在垂直 column 中它則控制行內的水平位置。gap 在兩種軸上行為相同：對於 row，它會在項目之間水平加上空間，並在啟用換行時於各行之間垂直加上空間；對於 column，同一個屬性會在項目之間垂直加上空間，並在換行項目的各行之間水平加上空間。這就是為什麼在開發階段看起來在頁面上展開的排版，到了正式環境中可能會塌縮成一個堆疊——如果 flex-direction 與既有規則的複製貼上同時被修改的話。
產生器所輸出的確定性規則讓那種交換更容易被察覺，因為每一個宣告都有固定的名稱和固定的順序：display、flex-direction、flex-wrap、justify-content、align-items、gap。從上到下閱讀這條規則時，可以逐行掃描以確認該關鍵字是否在當前軸上表現如預期。如果 justify-content 設為 space-between 但項目仍然全部擠在左邊，最可能的原因是 flex-direction 被改成了 column，使得 space-between 現在是在分布剩餘的垂直空間。
水平排版模式及其各自產生的 CSS
同一條六行宣告規則，根據所選取的值組合，可以產生數種視覺上不同的水平排版。一排靠左邊緣對齊的按鈕、一個置中的工具列，以及一個佔滿整個容器寬度且項目之間等距的列，全部都可以透過切換單一關鍵字來產生，而 gap 屬性正是控制它們之間固定呼吸空間的關鍵。下表顯示三種常見的水平模式，以及透過產生器各自產生的精確規則。
| 模式 | 產生器輸入 | 產生的 CSS |
|---|---|---|
| 靠左對齊且無額外間距的列 | row, nowrap, flex-start, stretch, 0 | display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0; |
| 具有呼吸空間的置中工具列 | row, nowrap, center, center, 12 | display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 12px; |
| 等距分布的導覽列 | row, nowrap, space-between, center, 8 | display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; |
這三條規則說明了其中三個控制項如何獨立移動。方向和換行保持為 row 和 nowrap，使排版永遠不會換行。分布方式從 flex-start 改為 center 再改為 space-between，以產生相同項目的三種不同水平位置。對齊方式從 stretch 改為 center，以切換垂直行為。Gap 在置中的範例中將相鄰項目之間的間距從零增加到明確的 12 像素，並在分布的範例中再降回 8 像素，這就是為什麼分布值和 gap 通常會一起調整，而非單獨調整。
What to Add After You Copy the Generated Rule
生成器的輸出是一個安全的容器起點，而非完整的響應式版面系統。此規則不包含廠商前綴、子元素的 flex 簡寫、flex-grow、flex-shrink、flex-basis、order、align-content、容器尺寸、overflow 處理、媒體查詢或回退機制。第一個要擴充規則的地方在子元素上：項目只有在自身帶有 flex、width、max-width 或 height 宣告時，才能填滿容器寬度或伸展到目標高度，讓父層規則得以作用。
第二個擴充的地方在媒體查詢中。一列在桌面寬度下能容納五個項目的排版，通常應該在窄螢幕時換行，也就是把 flex-wrap 從 nowrap 切換到 wrap，或是調整 align-items，讓換行後的對齊符合預期。生成器中的封閉列舉，代表你在自訂媒體查詢中寫下的每個關鍵字——flex-start、center、space-between 等等——都來自同一份工具接受的清單，因此後續手動撰寫的值必定是有效的 CSS。
最後，請把貼上的規則視為起點，並以實際內容、書寫模式、視窗大小、縮放層級，以及真實使用者會使用的輔助科技來檢視它。項目大小、書寫模式、容器尺寸與可用空間仍會影響實際版面，而將宣告複製到內容不同的容器中，自然可能產生與示範不同的換行結果。當水平版面的其他部分需要更多細節時——例如決定項目應如何填滿容器高度，或是較寬的項目應如何成長——填滿完整寬度以及填滿容器高度的相關指南，會更深入地說明這些子元素層級的決策。