當彈性容器自身有設定高度（例如 100vh、某個已設定大小的上層元素的 100%，或是某個固定值），並且其子元素被要求沿著交叉軸拉伸時，它就會填滿可用高度。在以列為方向的彈性容器中，交叉軸是垂直的，所以預設值 align-items: stretch 會讓每個彈性項目長到最高那個項目的高度，而最高項目的高度在沒有任何項目有固定高度時，會對齊到容器的內容框。最常被忽略的部分是容器本身的高度：當容器只取得其內容的高度時，stretch 其實沒有東西可以拉伸。把「填滿高度」視為兩個獨立決策（容器高度加上子元素拉伸）來思考，是處理所有 flexbox 版面時最乾淨的方式。
為什麼「填滿高度」其實是兩個獨立決策
「讓 flexbox 填滿高度」這句話其實藏了兩個不同的步驟，開發者很容易把它們混為一談。首先，容器本身需要一個實際的高度可以填滿。其次，內部的項目需要被允許沿著交叉軸拉伸。單獨設定 display: flex 只會產生彈性版面，但不會自動變成滿高行為；除非你（或某個已設定大小的上層元素）定義了高度，否則容器的高度仍然只跟內容一樣高。瀏覽器預設不會透過百分比單位往下傳遞高度，所以容器上的 height: 100% 只有在往上每一層上層元素直到某個已設定大小的根元素都有自己高度時才會生效。
要讓容器填滿視窗，請給它一個明確的高度，例如 height: 100vh 或 height: 100%（後者只在從根元素往下的每個上層元素都有高度時才會生效）。如果要讓子欄位符合主欄的高度，給父元素一個高度，讓 flexbox 分配子元素；在列方向的容器中保留預設的 align-items: stretch，每個子元素就會被拉伸到行高。至於項目本身，交叉軸屬性 align-items 就是那個開關。它的預設 stretch 會讓項目填滿交叉軸；flex-start、flex-end 和 center 則會把項目縮成內容高度，並把項目貼齊到某一端或中間。baseline 則是依文字基線對齊，而不是依高度對齊。當你希望子元素共用行高時選 stretch，只有在刻意要塌縮尺寸時才選其他值。
決定交叉軸尺寸的五個控制項
交叉軸尺寸只有在其他四個核心 Flexbox 屬性與它一致時，才會照你預期的方式運作。這個 Flexbox 產生器正好把這五個控制項全部攤出來，並對照一份封閉清單進行驗證，所以預覽和複製出來的 CSS 不會在不知情的情況下產生分歧。
| 屬性 | 支援的值 | 對交叉軸填滿的影響 |
|---|---|---|
| flex-direction | row, row-reverse, column, column-reverse | row 維持交叉軸為垂直；column 則把交叉軸轉為水平，此時 stretch 會填滿寬度 |
| 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，只接受整數像素 | 在項目之間以及換行之間加入間距；不會改變 stretch 行為 |
在「填滿高度」相關工作中有兩個模式最重要。第一，在列方向的容器中，預設的 align-items: stretch 搭配一個已定義的容器高度，就能讓每個子元素都得到滿高的行高。第二，切換成 flex-direction: column 後，stretch 仍然有效，但會作用在水平軸上，所以子元素會填滿寬度而不是高度。這個旋轉正是「昨天還能用的版面」在改了方向之後突然不再填滿預期維度最常見的原因。
設定一個會填滿高度的彈性容器
- 挑選符合你版面的 flex direction。如果是一排滿高的欄位，請保持 row。如果是一個垂直堆疊且要填滿寬度，請切換到 column，並記得此時的 align-items: stretch 影響的是寬度而不是高度。
- 選擇換行模式。nowrap 會把所有項目留在同一條交叉軸區段上，當你需要固定高度的側邊欄或主視覺區時，這是最安全的選擇。wrap 會形成新的行，每一行各自拉伸到容器的交叉軸尺寸；wrap-reverse 也會做一樣的事，但會從交叉軸的尾端開始堆疊這些區段。
- 選擇主軸的分布（justify-content）。在列方向上，這控制的是水平間距；在欄方向上則控制垂直間距。六個選項都不會改變交叉軸的 stretch 行為，所以這一步與填滿高度無關。
- 選擇交叉軸的項目對齊方式（align-items）。若要讓項目在列方向上填滿容器高度，請保留 stretch。只有在刻意要塌縮項目時才選 center、flex-start、flex-end 或 baseline。
- 在 gap 欄位中輸入一個 0 到 100 之間的整數像素值。解析器只接受 base-10 的整數，所以 8 可以，但 8.5、8px、08 以及任何超過 100 的數值都會在影響預覽或輸出之前就被擋下。
- 檢查那五個固定的預覽項目。預覽只有在每個欄位都有效時才會更新，而套用到這些項目上的樣式，會和輸出區塊最後會用到的那組已驗證設定一致。
- 產生 .container 規則。產生器會以固定順序輸出剛好六個宣告：display: flex，然後依序是 flex-direction、flex-wrap、justify-content、align-items 和 gap。沒有任何瀏覽器前綴、子規則或媒體查詢。
- 用複製按鈕複製產生的 CSS，或在剪貼簿步驟失敗時手動選取可見的程式碼。即使複製失敗，完整的 CSS 仍會留在畫面上可供手動選取，所以你不會遺失輸出結果。
如果你在產生之後又改了任何 select 或 gap，先前的輸出、任何驗證訊息以及複製成功的提示都會立刻被清掉。再次產生時，會在新的區塊出現之前重新驗證整個狀態，所以無效的值永遠不會跑到 inline style 或被複製的文字中。
把產生的 CSS 套用到常見的填滿高度版面
把產生的 .container 規則放進你的 stylesheet，然後在它旁邊加上容器高度和你的子規則。一個滿視窗的主視覺區可以在容器上用 height: 100vh 搭配預設生效的 align-items: stretch。於是每個預覽子元素就會對齊到視窗高度。雙欄版面則會用一個固定高度或 100vh 的父元素、一個列方向的容器，以及產生器預設的 align-items: stretch。較高的那一欄決定行高，較矮的那一欄會自動跟上，子元素上完全不需要寫明確的高度。垂直導覽列則使用 flex-direction: column、align-items: stretch，以及 justify-content: flex-start。在這種情況下 stretch 會填滿項目的寬度而不是高度，所以項目的高度會來自每個項目自己的內容，或來自你自己寫的子規則。
由於產生器只輸出容器區塊，容器高度、子元素的寬度、中斷點和無障礙考量就得由你自己在被檢視過的 stylesheet 中補上。複製出來的 CSS 只是一個安全的起點，不是一個完成的響應式版面——這也是為什麼同一段產生的區塊，可以在上述三種版面中都乾淨地套用，三者之間唯一改變的就只有容器高度。
為什麼封閉且會驗證的產生器優於土法煉鋼的編輯
產生器會拒絕任意屬性名稱、選擇器、單位文字和 CSS 標點，所以輸出區塊中不會夾帶任何多餘片段或被注入的宣告。每一組關鍵字清單（方向、換行、分布、對齊）都是 W3C Flexbox 與 Box Alignment 規範中的封閉子集合，而且每個值在序列化之前還會再對那份清單驗證一次。gap 的解析器採用嚴格的 base-10 整數文法；負值、小數、像 08 這種帶前導零的形式、科學記號以及單位後綴都會被拒絕，而不是被默默地強制轉型。長度超過 32 個 UTF-16 code units 的原始 gap 文字會直接失敗而不會被截斷，超過 100 的數值會回報錯誤，而不是被縮減成最大值。預覽和複製出來的區塊來自同一組已驗證的設定，所以這兩種表示方式不會出現分歧。
以上流程全部在本機、在當下的瀏覽器分頁中執行。沒有任何設定、產生的 CSS 或複製成功的提示會被上傳。這個工具不會建立任何檔案、不會產生 Blob URL、不會引入遠端樣式表、不會嵌入框架，也不會動態執行任何 CSS 字串，這表示你可以直接把輸出貼進樣式表，不必為了檢查是否有隱藏行為而另外稽核。每一次複製工作都會掛上一個產生作業識別，因此當你編輯、重新產生、再次複製或卸載元件時，較舊的非同步結果就會失效。
用真實內容和視窗尺寸測試結果
預覽使用的是五個固定的本地項目，它無法得知你的容器實際尺寸、內容的自然大小、使用者的書寫方向或縮放層級。在你上線之前，請把產生的 .container 規則貼進你自己的 stylesheet，加上容器的高度（例如 body 用 min-height: 100vh、外層用 height: 100%），然後以你真正要支援的視窗大小，用真實的子內容進行測試。同一條規則在桌機上能填滿主視覺區，在窄螢幕手機上卻可能因為項目的自然最小寬度而意外換行；在你宣告完成之前，請把容器區塊搭配一個媒體查詢，或在產生器中明確選擇 flex-wrap。產生、貼上、調整尺寸、再來一次的短循環，會比盲目猜數值來得快，也能暴露出靜態預覽無法重現的填滿問題。
如果你正在權衡各種做法，How to Make Flexbox Items Fill the Full Width 對此有更詳細的說明。
如果你正在權衡各種做法，How to Make Flexbox Horizontal 對此有更詳細的說明。