視覺化建構 CSS Flexbox 版面
CSS Flexbox 彈性盒模型是現代網頁排版的核心技術，用於解決一維空間的元件排列與空間分配。透過「Flexbox 版面產生器」，開發者與設計師可以直接在瀏覽器中調整各項參數，即時觀察容器與項目的形變，並直接複製對應的 CSS 程式碼。
本工具的運作完全在您的瀏覽器中進行，您在此處設定的任何版面參數與數值都不會上傳到伺服器，確保開發流程的隱私。
彈性容器屬性與軸線關係
Flexbox 的排版邏輯建立在「主軸（Main Axis）」與「交叉軸（Cross Axis）」的雙軸概念上。容器的屬性決定了子項目的整體流向與對齊基準：
- 排列方向（
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）與「基線」（baseline）。 - 多行對齊（
align-content）：此屬性僅在開啟「換行」且項目實際產生多行時才會生效。它決定了多個行別在容器交叉軸上的間距分佈，選項與主軸對齊類似，包含起始、結尾、置中、拉伸、兩端對齊、環繞分佈與平均分佈。 - 間距（
gap）：設定一個數值，用以定義項目與項目之間、以及行與行之間的空隙，不需額外撰寫外距（margin）。
彈性項目屬性與個別控制
除了容器整體的控制外，每個子項目（Flex Items）也能擁有獨立的彈性行為。在產生器中，您可以點擊「新增項目」來增加新的項目（例如「項目 5」）。只有當您修改了特定項目的預設值時，產生器才會為該項目單獨輸出 CSS 規則。
- 順序（
order）：以整數數值決定項目的排列順序。數值越小越靠前，這允許開發者在不變動 HTML 結構的前提下，直接改變畫面上呈現的視覺順序。 - 放大（
flex-grow）：當容器主軸有剩餘空間時，項目分配剩餘空間的比例數值。 - 縮小（
flex-shrink）：當容器空間不足、且未開啟換行時，項目壓縮自身尺寸的比例數值。 - 基準尺寸（
flex-basis）：項目在分配剩餘空間之前的初始尺寸，可輸入具體數值或設定為「自動基準」（auto）。 - 單獨對齊（
align-self）：允許單一項目覆蓋容器的align-items設定，在交叉軸上進行獨立對齊，可選「自動」（auto）、「起始」、「結尾」、「置中」、「拉伸」或「基線」。
常見版面配置範例
利用 Flexbox 可以快速建構出網頁設計中常見的幾種經典版面：
| 預設版面 | 容器核心設定 | 項目核心設定 |
|---|---|---|
| 置中 | justify-content: center;<br>align-items: center; |
預設值即可 |
| 導覽列 | flex-direction: row;<br>justify-content: space-between; |
項目通常維持自動寬度 |
| 縱向堆疊 | flex-direction: column; |
項目可設定 align-self 或填滿 |
| 卡片網格 | flex-wrap: wrap;<br>gap: [數值]; |
項目設定 flex-grow 與 flex-basis |
| 側邊欄 | flex-direction: row; |
側邊欄項目固定 flex-shrink: 0;<br>主內容項目 flex-grow: 1; |
常見問題 FAQ
justify-content 和 align-items 有什麼差別?
justify-content 沿主軸（項目排列的方向）分配項目，align-items 則控制項目在另一條軸（交叉軸）上的位置。把方向從橫向（row）改成縱向（column），兩條軸就對調了——justify-content 變成上下排列，align-items 變成左右對齊。
單一項目的控制項怎麼用?
先依編號選取一個項目，再設定它有空間時放大多少、空間不足時縮小多少、初始尺寸（基準）以及它自己的交叉軸對齊方式。順序（order）能讓項目在畫面上提前或往後，而不必更動 HTML。只有你真正改過的項目，才會在 CSS 裡單獨產生一條規則。
換行和 align-content 什麼時候會作用?
不換行時，所有項目都被擠在同一行，會被壓得更窄。開啟換行後，放不下的項目會掉到下一行——這時 align-content 才登場，把多行當成一個整體來分配間距。間距（gap）則不必用外距就能設定項目之間、以及行與行之間的空隙。