flex-wrap 的作用是什麼？

flex-wrap 控制當空間不足時，Flex 項目是保持在一行還是在多行上換行。預設值 nowrap 會強制項目排在單行上並可能縮放它們。wrap 允許項目流向新行，而 wrap-reverse 則以相反順序換行。

CSS Flexbox 演練場

Q: 什麼是 CSS Flexbox？

CSS Flexbox（彈性盒子佈局）是 CSS 中的一種一維佈局模型，旨在沿著單一軸線（列或行）分配空間並對齊容器內的項目。它非常適合導覽列、卡片佈局、內容居中以及任何需要靈活對齊而無需複雜計算或浮動（floats）的 UI。

Q: justify-content 和 align-items 有什麼區別？

justify-content 控制沿主軸（預設為水平）的對齊方式，而 align-items 控制沿交叉軸（預設為垂直）的對齊方式。當您將 flex-direction 更改為 column 時，軸線會交換：justify-content 變為垂直方向，而 align-items 變為水平方向。

Q: 如何使用 Flexbox 讓元素居中？

要使用 Flexbox 將單個元素在水平和垂直方向上同時居中，請將父容器設置為 display: flex，然後添加 justify-content: center 和 align-items: center。這是取代舊有 margin: auto、transform 或絕對定位居中技巧的現代方法。

Q: flex-grow、flex-shrink 和 flex-basis 之間有什麼區別？

flex-basis 在分配剩餘空間之前設置項目的初始大小。flex-grow 定義項目相對於其他項目應吸收多少額外空間（0 表示不增長）。flex-shrink 定義當空間不足時項目應縮小多少（0 表示不縮小）。簡寫屬性 flex: 1 1 auto 可同時設置這三項。

Q: 什麼時候應該使用 Flexbox 而不是 Grid？

對於項目沿單一方向流動的一維佈局（一排按鈕、導覽列、單行卡片列表），請使用 Flexbox。對於需要同時控制行和列的二維佈局（全頁面佈局、圖片庫、儀表板），請使用 CSS Grid。兩者是互補的而非競爭關係——許多真實設計會結合使用它們。

互動式 CSS Flexbox 演練場，提供即時視覺預覽、單一項目控制、真實場景佈局預設（聖杯佈局、卡片網格、導覽列、彈窗），以及一鍵 CSS 匯出。透過即時實驗學習 flex-direction、justify-content、align-items、gap 等屬性。

CSS Flexbox 演練場

⚡ 快速啟動佈局（點擊載入）

▦ 即時預覽

→ 主軸 (main axis) ↓ 交叉軸 (cross axis) 0 個項目提示：點擊任何項目即可編輯

⚙ 容器 (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap (間距) 8px

8px

✦ 已選項目 (.flex-item)

點擊預覽中的項目以編輯其屬性。

📖 快速速查表 — 常見模式

▼

我想要…	使用此設置
完美居中單個項目	`justify-content: center; align-items: center`
等寬欄位	每個項目都設置 `flex: 1`
將一個項目推向最右側	在該項目上設置 `margin-left: auto`
小屏幕上換行卡片	`flex-wrap: wrap` + `flex: 1 1 240px`
在行動端反轉順序	在媒體查詢中設置 `flex-direction: row-reverse`
將頁尾固定在視窗底部	body: `display: flex; flex-direction: column; min-height: 100vh`
項目之間均等間距	`justify-content: space-between`
禁止項目縮小	在該項目上設置 `flex-shrink: 0`

產生的 CSS

產生的 HTML

Embed CSS Flexbox 演練場 Widget

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日

CSS Flexbox 演練場

CSS Flexbox 演練場

什麼是 CSS Flexbox？

如何使用此演練場

容器屬性參考

項目屬性參考

justify-content 和 align-items 有什麼區別？

如何使用 Flexbox 讓元素居中？

真實場景佈局預設解析

聖杯佈局 (Holy Grail Layout)

卡片網格 (Card Grid)

導覽列 (Navbar)

Hero 區塊

彈窗居中 (Modal Center)

固定頁尾 (Sticky Footer)

flex-grow、flex-shrink 和 flex-basis 之間有什麼區別？

什麼時候應該使用 Flexbox 而不是 Grid？

掌握 Flexbox 的小貼士

瀏覽器支持與兼容性

常見問題

為什麼我的 Flex 項目溢出了容器？

space-between, space-around 和 space-evenly 有什麼區別？

Flex 屬性可以製作動畫嗎？

演練場支援離線工作嗎？

產生的代碼可以直接用於生產環境嗎？

其他資源

網站管理工具:

常用工具: