CSS Flexbox 演練場
互動式 CSS Flexbox 演練場，提供即時視覺預覽、單一項目控制、真實場景佈局預設（聖杯佈局、卡片網格、導覽列、彈窗），以及一鍵 CSS 匯出。透過即時實驗學習 flex-direction、justify-content、align-items、gap 等屬性。
偵測到廣告封鎖，導致我們無法顯示廣告
MiniWebtool 依靠廣告收入免費提供服務。如果這個工具幫到你，歡迎升級 Premium（無廣告 + 更快），或將 MiniWebtool.com 加入允許清單後重新整理頁面。
- 或升級 Premium（無廣告）
- 允許 MiniWebtool.com 顯示廣告，然後重新載入
CSS Flexbox 演練場
CSS Flexbox 演練場 是一個互動式學習環境和代碼產生器，專為現代 CSS 彈性盒子佈局（Flexible Box Layout）模組設計。您可以調整容器屬性（flex-direction, justify-content, align-items, gap）以及每個項目的單獨屬性（flex-grow, flex-shrink, flex-basis, align-self, order），並即時觀察佈局變化。當您調整出滿意的效果時，可以直接複製可用於專案的 CSS 和 HTML 代碼。
什麼是 CSS Flexbox？
CSS Flexbox（彈性盒子佈局）是一種一維佈局模型，旨在沿著單一軸線（行或列）分配空間並對齊容器內的項目。它取代了過去用於導覽列、卡片排版、內容居中以及任何需要元素自然適應容器的舊技術（如浮動 floats 和 inline-block 技巧）。與二維的 CSS Grid 不同，Flexbox 擅長於只需在一個方向上控制對齊的簡單排列。
如何使用此演練場
- 選擇預設（選填）： 選擇聖杯佈局、卡片網格、導覽列、Hero 區塊、彈窗或固定頁尾，以載入真實場景的起點。每個預設都是一個完整的、可運行的佈局，供您研究或修改。
- 調整容器屬性： 使用右側面板中的分段控制按鈕來設置
flex-direction,flex-wrap,justify-content,align-items,align-content和gap。視覺舞台會立即更新。 - 編輯單個項目： 點擊預覽中的任何項目以選中它。您可以獨立於其他項目覆蓋其
order,flex-grow,flex-shrink,flex-basis和align-self。具有自定義屬性的項目會標有小圖示。 - 新增或刪除項目： 使用「新增項目」和「刪除選中項」來更改項目數量，觀察佈局如何反應。
- 複製代碼： 底部「產生的代碼」部分始終反映您當前的佈局。一鍵即可複製 CSS、HTML 或兩者。
容器屬性參考
Flex 容器是設置了 display: flex 的父元素。這些屬性控制其所有子元素的共同行為。
| 屬性 | 值 | 效果 |
|---|---|---|
flex-direction |
row · row-reverse · column · column-reverse |
設置主軸方向。row 為從左到右排列（預設）；column 為垂直堆疊。 |
flex-wrap |
nowrap · wrap · wrap-reverse |
控制當空間不足時，項目是保持在單行還是換行到多行。 |
justify-content |
flex-start · center · flex-end · space-between · space-around · space-evenly |
沿主軸對齊項目。將剩餘空間分配到兩側或項目之間。 |
align-items |
stretch · flex-start · center · flex-end · baseline |
沿交叉軸（與主軸垂直）對齊項目。 |
align-content |
stretch · flex-start · center · flex-end · space-between · space-around |
沿交叉軸對齊換行後的行。僅在項目換行為多行時生效。 |
gap |
長度值，例如 8px, 1rem |
設置 Flex 項目之間的間距。取代了舊有的基於 margin 的間隔模式。 |
項目屬性參考
這些屬性應用於個別的 Flex 項目（容器的子元素），並僅針對該項目覆蓋容器的預設行為。
| 屬性 | 值 | 效果 |
|---|---|---|
order |
整數（預設為 0） |
在不改變 HTML 的情況下調整項目的視覺順序。數字越小越靠前；負值可將項目移至開頭。 |
flex-grow |
數字（預設為 0） |
定義該項目相對於兄弟元素應吸收多少容器剩餘空間。所有項目設為 1 則平分空間。 |
flex-shrink |
數字（預設為 1） |
定義空間不足時項目的縮小程度。0 表示永不縮小——項目保持其宣告的大小。 |
flex-basis |
auto · 長度值 · 百分比 |
在分配剩餘空間之前設置項目的初始大小。實際上設置了項目的「理想」主軸大小。 |
align-self |
auto · 與 align-items 相同的值 |
針對單個項目覆蓋容器的 align-items 設置。 |
justify-content 和 align-items 有什麼區別？
justify-content 控制沿主軸的對齊，而 align-items 控制沿交叉軸的對齊。主軸由 flex-direction 決定——row 時為水平，column 時為垂直。當您將 flex-direction 從 row 改為 column 時，兩個軸線會交換，因此 justify-content 變成了控制垂直方向，而 align-items 變成了控制水平方向。這種交換是學習 Flexbox 時最常見的困惑來源；預覽下方的軸線指示器可以幫助您視覺化這一點。
如何使用 Flexbox 讓元素居中？
要讓單個元素在水平和垂直方向上完全居中：
display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
這是取代舊有 margin: auto、transform: translate(-50%, -50%) 或 position: absolute 等居中技巧的現代方法。您可以通過選擇彈窗居中 (Modal Center) 預設在演練場中嘗試。
真實場景佈局預設解析
聖杯佈局 (Holy Grail Layout)
經典的三欄式頁面佈局：左側欄、主內容區、右側欄，配有頁首和頁尾。過去用浮動（floats）很難實現，但 Flexbox 讓它變得非常簡單。中間欄使用 flex: 1，因此它會吸收所有剩餘的水平空間，而兩側欄則保持其宣告的寬度。
卡片網格 (Card Grid)
一組會自動換行的卡片，隨著視窗縮小流向新行。使用 flex-wrap: wrap 並為每張卡片設置 flex: 1 1 240px，意味著卡片會增長和縮小，但寬度絕不會小於 240px。
導覽列 (Navbar)
水平導覽列，左側為標誌（Logo），右側為連結。技巧是使用 justify-content: space-between，並將標誌和連結組作為兩個子元素，連結組內部可以再使用一個 Flex 容器。
Hero 區塊
內容在水平和垂直方向都居中的垂直堆疊——非常適合著陸頁的 Hero 區域。在一個較高的容器上使用 flex-direction: column, justify-content: center 和 align-items: center。
彈窗居中 (Modal Center)
在遮罩層中完全居中的彈窗對話框。使用上述的三行居中秘訣，應用於全屏的遮罩容器。
固定頁尾 (Sticky Footer)
當內容較少時停留在視窗底部，內容較長時被推下的頁尾。通過給 body 設置 display: flex; flex-direction: column; min-height: 100vh 並給主內容區設置 flex: 1 來實現。
flex-grow、flex-shrink 和 flex-basis 之間有什麼區別？
這三個屬性（可組合成簡寫屬性 flex）描述了項目如何處理空間：
flex-basis在分配任何空間之前設置項目的理想大小。可以將其視為項目的「起跑點」。flex-grow表示「如果有剩餘空間，請分配這部分比例給我」。值為0表示拒絕增長；1表示按比例增長；2表示獲取的份額是1項目的兩倍。flex-shrink表示「如果空間不足，請按此比例縮小」。預設為1（按比例縮小）；0表示拒絕縮小。
簡寫 flex: 1 會擴展為 flex: 1 1 0%——等比例增長、等比例縮小、基準值為零——這意味著所有項目將無視內容大小，平均分配容器空間。flex: auto 則擴展為 flex: 1 1 auto，它會尊重內容的原始大小作為基準。
什麼時候應該使用 Flexbox 而不是 Grid？
對於項目沿單一方向流動的一維佈局，請使用 Flexbox——例如一排按鈕、導覽列或單列卡片。Flexbox 是內容導向的，非常適合讓項目根據自身大小進行排列。
對於需要同時控制行和列的二維佈局，請使用 CSS Grid——例如全頁面佈局、圖片庫或儀表板。Grid 是佈局導向的，讓您可以將項目放入預定義的軌道中。
兩者是互補的。許多現實設計會結合使用：用 Grid 進行頁面佈局，內部則使用 Flexbox 構建導覽列和卡片行。
掌握 Flexbox 的小貼士
- 視覺化軸線： 始終清楚哪一個是「主軸 (main)」，哪一個是「交叉軸 (cross)」——演練場的軸線標示牌明確顯示了這一點。
- 使用
gap取代 margins： 現代瀏覽器已完全支持 Flex 容器上的gap，這消除了對最後一個子元素使用複雜 margin 技巧的需求。 - 善用
flex: 1： 當您希望項目平等分享空間時，這個簡寫通常就是您想要的。 - 在 Flex 項目上設置
min-width: 0： 項目會根據其內容具有隱式最小寬度。如果長字符串（如 URL）導致佈局溢出，請在項目上設置min-width: 0來覆蓋此行為。 - 避免僅使用百分比寬度： 將百分比寬度與
flex-grow混合使用可能會產生意外結果。建議優先使用flex-basis並配合合理的預設值。
瀏覽器支持與兼容性
CSS Flexbox 已在所有現代瀏覽器中得到支持，包括 Chrome, Firefox, Safari, Edge 以及所有主流行動端瀏覽器。Flex 容器中的 gap 屬性在 2021 年實現了全球瀏覽器通用支持。較舊的遺留瀏覽器 (IE10/11) 需要供應商前綴，且存在幾個已知的 Bug；對於這些受眾，請參考 flexbugs。
常見問題
為什麼我的 Flex 項目溢出了容器？
Flex 項目根據其內容具有隱式的 min-width: auto。長單詞、代碼塊或預格式化文本可能會強制項目寬度大於容器。通過在項目上設置 min-width: 0（或在列佈局中設置 min-height: 0）來修復此問題。
space-between, space-around 和 space-evenly 有什麼區別？
space-between 兩端不留空，項目之間間距相等。space-around 兩端留出半個間距，項目之間留出完整間距。space-evenly 兩端和項目之間的間距完全相等。在演練場中切換它們以感受差異。
Flex 屬性可以製作動畫嗎？
可以。flex-grow, flex-shrink, flex-basis, order 和 gap 都可以進行過渡動畫（transition）。但不支援為 flex-direction, justify-content 和 align-items 製作動畫，因為它們是離散的枚舉屬性。
演練場支援離線工作嗎？
所有的 Flexbox 計算都使用原生 CSS 在您的瀏覽器中完成。頁面載入後，您可以在沒有網路的情況下使用演練場——無需 API 調用或服務端計算。
產生的代碼可以直接用於生產環境嗎？
可以。導出的 CSS 使用所有常青瀏覽器都支援的標準屬性。HTML 使用語義化類名（flex-container, flex-item），您可以根據專案規範對其進行重命名。
其他資源
引用此內容、頁面或工具為：
"CSS Flexbox 演練場" 於 https://MiniWebtool.com/zh-tw/css-flexbox-演練場/，來自 MiniWebtool，https://MiniWebtool.com/
由 miniwebtool 團隊開發。更新日期：2026年4月25日
其他相關工具:
網站管理工具:
- CPC計算機
- cpm計算機 精選
- CSS壓縮器
- 網站圖標產生器
- 穀歌的adsense計算機
- cron作業生成器
- crontab表達式產生器
- html壓縮器
- HTML 到文本轉換機
- 關鍵詞密度檢查器
- Markdown表格產生器
- 元標記生成器
- 智能引號刪除工具
- URL Slug 產生器
- 頁麵價值計算機
- 訪客價值計算機
- unix權限計算機
- html實體編碼解碼器
- Lorem Ipsum 產生器
- JSON字串轉義反轉義
- cURL轉JSON轉換器
- SQL格式化工具
- SVG最佳化工具
- .htaccess 重定向生成器
- Googlebot抓取大小檢測器
- Robots.txt 產生器 新
- XML網站地圖產生器 新
- 網域年齡查詢器 新
- Open Graph 檢測器 新
- WHOIS查詢 新
- DNS 查詢 新
- 頁面速度檢查器 新
- 網域信任度檢查器 新
- 重定向檢查器 新
- Hreflang 標籤產生器 新
- 死鏈檢查器 新
- CSS Flexbox 演練場 新
- CSS Grid 生成器 新
- Git 指令生成器 新
- .env 檔案生成器 新