CSS Flexbox 演練場

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 擅長於只需在一個方向上控制對齊的簡單排列。

如何使用此演練場

1. 選擇預設（選填）： 選擇聖杯佈局、卡片網格、導覽列、Hero 區塊、彈窗或固定頁尾，以載入真實場景的起點。每個預設都是一個完整的、可運行的佈局，供您研究或修改。
2. 調整容器屬性： 使用右側面板中的分段控制按鈕來設置 flex-direction, flex-wrap, justify-content, align-items, align-content 和 gap。視覺舞台會立即更新。
3. 編輯單個項目： 點擊預覽中的任何項目以選中它。您可以獨立於其他項目覆蓋其 order, flex-grow, flex-shrink, flex-basis 和 align-self。具有自定義屬性的項目會標有小圖示。
4. 新增或刪除項目： 使用「新增項目」和「刪除選中項」來更改項目數量，觀察佈局如何反應。
5. 複製代碼： 底部「產生的代碼」部分始終反映您當前的佈局。一鍵即可複製 CSS、HTML 或兩者。

容器屬性參考

Flex 容器是設置了 display: flex 的父元素。這些屬性控制其所有子元素的共同行為。

項目屬性參考

這些屬性應用於個別的 Flex 項目（容器的子元素），並僅針對該項目覆蓋容器的預設行為。

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

justify-content 控制沿主軸的對齊，而 align-items 控制沿交叉軸的對齊。主軸由 flex-direction 決定——row 時為水平，column 時為垂直。當您將 flex-direction 從 row 改為 column 時，兩個軸線會交換，因此 justify-content 變成了控制垂直方向，而 align-items 變成了控制水平方向。這種交換是學習 Flexbox 時最常見的困惑來源；預覽下方的軸線指示器可以幫助您視覺化這一點。

如何使用 Flexbox 讓元素居中？

要讓單個元素在水平和垂直方向上完全居中：

這是取代舊有 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 彈性盒子佈局 - MDN
• CSS 彈性盒子佈局模組 Level 1 - W3C 規範
• CSS Flex Box 佈局 - 維基百科

其他相關工具:

網站管理工具:

• 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 演練場 新