簡化您的工作流程：搜尋 miniwebtool。
添加插件
主頁 > 網站管理工具 > CSS Flexbox 演練場
 

CSS Flexbox 演練場

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



如何使用此演練場



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




容器屬性參考



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: 1 會擴展為 flex: 1 1 0%——等比例增長、等比例縮小、基準值為零——這意味著所有項目將無視內容大小，平均分配容器空間。flex: auto 則擴展為 flex: 1 1 auto，它會尊重內容的原始大小作為基準。



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



對於項目沿單一方向流動的一維佈局，請使用 Flexbox——例如一排按鈕、導覽列或單列卡片。Flexbox 是內容導向的，非常適合讓項目根據自身大小進行排列。


對於需要同時控制行和列的二維佈局，請使用 CSS Grid——例如全頁面佈局、圖片庫或儀表板。Grid 是佈局導向的，讓您可以將項目放入預定義的軌道中。


兩者是互補的。許多現實設計會結合使用：用 Grid 進行頁面佈局，內部則使用 Flexbox 構建導覽列和卡片行。



掌握 Flexbox 的小貼士





瀏覽器支持與兼容性



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美化工具新
CSS壓縮器
CSS Grid 生成器新
漸變產生器
html壓縮器
SCSS轉CSS編譯器新
SVG 轉 React/JSX 轉換器新
 
  
 
 
 
 
  
 
 
  
 
 
 
  
    
 
 
網站管理工具:


 
 
  
 
 
 
   
 
   
常用工具:

            
分數計算機隨機撲克牌產生器真心話大冒險產生器斜邊計算機圖片分割器羅馬數字轉換器百分比增加計算機磅轉公斤轉換器標準偏差計算機 - 高精度百分比增長率計算機毛利率計算機比例計算機相對標準偏差計算機kg到lbs轉換器🌡️ 體感溫度計算機隨機餐點產生器圓計算機🎮 遊戲靈敏度轉換器MAC地址查找分數百分比轉換器最簡分數計算機AI內容檢測器kpa到psi轉換器太陽、月亮與上升星座計算機 🌞🌙✨年齡計算機百分比折扣計算機質數分解計算機分數到小數計算機隨機信用卡生成器百分比變化計算機百分比減少計算機隨機名稱生成器反向文字線性迴歸計算機百分比計算機ANC計算機百分比誤差計算機校正鈣計算機克到磅轉換器凱薩密碼工具商和餘數計算機影片轉圖片擷取器HEX計算機不規則多邊形面積計算機年份天數計算機 - 今天是今年的第幾天⏱️ 小時計算機坡度與傾斜度計算機調整影片速度Instagram用戶ID查詢GUID / UUID 生成器📅 日期計算機CAGR計算機影片壓縮器二次公式計算機加價計算機對數計算機複利計算機Bar to PSI 轉換器因子計算機查找並替換文字SRT時間偏移隨機錦標賽對陣生成器OPS計算機小字體生成器 ⁽ᶜᵒᵖʸ ⁿ ᵖᵃˢᵗᵉ⁾平均值計算機我的幸運數字是什麼簡單利息計算機音訊分割器剪刀石頭布產生器定期存款計算機填字遊戲製作器畢達哥拉斯定理計算機樂透號碼生成器多分數計算機迷宮產生器燃油費用計算機隨機顏色生成器比率與百分比計算機隨機選擇器賓果卡生成器psi到kpa轉換器複數計算機兩點間距離計算機質數檢查器跑步配速計算機積分計算機ERA計算機出生星期計算機最小公倍數計算機文字重複工具小數到分數計算機YouTube頻道統計組合計算機🌐 時區轉換器隨機名字選擇器樓梯計算機橢圓 周長計算機SRT轉換為TXT工具HEX轉換器總和計算機AI標點符號添加器演講時間計算機直角三角形計算機參數曲線繪圖器隨機撲克手牌生成器FPS 轉換器可整除測試計算機弧長計算機文件大小轉換器倒立文本產生器隨機字母生成器隨機物品生成器合併影片年金現值計算機百分比到ppm轉換器體積轉換器PSI 轉 Bar 轉換器刪除線文字產生器階乘計算機體型計算機星期幾計算機磅到克轉換器鋼筋計算機隨機日期生成器棒球打擊率計算機愛情兼容性計算機小數到百分比轉換器相關係數計算器工時計算機文本格式化工具圖片打碼工具隨機英文單字產生器Facebook用戶ID查詢壓力轉換器上壘率計算機分數簡化斜率計算機cpm計算機大圓距離計算機步數距離計算機科學記數法計算機中位數計算機平方根計算機預期壽命計算機卡諾圖 (K-Map) 求解器隨機字符串生成器Zalgo文本生成器汽車貸款計算機最大公因子計算機隨機貓狗名字產生器土星回歸計算機天使數字計算機常規時間到小數時間轉換器為影片新增浮水印騎行速度計算機投球命中率計算機百分比到小數轉換器純利潤計算機MAC地址產生器汽車折舊計算機線規計算機樣本量計算機YouTube收益估算器Git 指令生成器SRT合併工具ppm到百分比轉換器磚塊與砂漿計算機凱利公式計算機條碼產生器小數時間轉換器功率轉換器比率計算機移除標點符號線上工具隨機數學題產生器四捨五入計算機正方形計算機破產風險計算機速度轉換器GIF 轉 MP4 轉換器WAR計算機橢圓面積計算機比較分數計算機花樣字體生成器預產期計算機圓柱體體積計算機 高精度游泳配速計算機Z-分數計算機⏱️ 倒數計時器散佈圖製作器摩爾斯電碼生成器行數統計工具emi計算機每個月的天數隨機時間生成器保齡球計分計算機黃金比例計算機每局被上壘率 WHIP 計算機隨機生日生成器二進製計算機翻轉影片副業ROI計算機訂閱費用追蹤器SaaS定價計算機自由接案專案報價計算機煙燻木材搭配指南發酵時間計算機醃製時間計算機飲食限制食譜篩選器香料替代查找器咖啡因半衰期追蹤器標準杯計算機葡萄酒搭配建議器攀岩難度等級轉換器自行車齒輪比計算機釣魚結強度計算機瑜伽體式保持計時器游泳SWOLF計算機跑步成績預測計算機拳擊出拳力量計算機橄欖球得分計算機板球得分率計算機足球 xG預期進球計算機網球計分器Wells評分計算機 (DVT/PE)格拉斯哥昏迷指數計算機阿普加評分計算機FFMI計算機庫珀12分鐘跑步計算機一英里步行測試Rockport計算機瘦體重力量計算器碳水化合物胰島素比例計算機胰島素敏感係數計算機希伯來曆轉換器伊斯蘭曆轉換器農曆轉換器跨文化年齡計算機多久以前計算機還有多久倒數計算機日期模式產生器中間日期計算機日期加上工作日工作日計算機詞頻分析器句子長度變異分析器海明威風格可讀性編輯器發音音標轉換器維吉尼亞密碼工具埃特巴什密碼工具ROT13編碼解碼器EXIF 資料檢視與移除工具豬拉丁文翻譯器倒推首字母縮寫產生器首字母縮寫產生器全字母句檢查器漏字文檢測器圖片轉SVG描摹器圖片轉 ASCII 藝術轉換器JSON Schema 產生器TypeScript 線上演練場Less 到 CSS 編譯器SCSS轉CSS編譯器SVG 轉 React/JSX 轉換器查詢字串產生器URL解析器UUID驗證和解碼器HTTP狀態碼參考cURL指令建構器謝爾賓斯基三角形產生器3D曲面繪圖器極座標方程繪圖器茱莉亞集合生成器曼德博集合探索器L-System分形產生器Delaunay 三角剖分生成器Voronoi 圖生成器萬花尺圖案產生器鑲嵌圖案產生器六標準差製程能力計算機柏拉圖生成器NPS淨推薦值計算機留存率同期群計算機客戶流失率計算機客戶獲取成本CAC計算機顧客終身價值 CLV 計算機轉換率計算機A/B測試樣本數計算機A/B測試顯著性計算機透鏡方程式計算機導線磁場計算機電場計算機庫侖定律計算機斯涅爾定律計算機慣性矩計算機角速度計算機向心力計算機單擺週期計算機彈簧勁度係數計算機都卜勒效應計算機索提諾比率計算機特雷諾比率計算機股票貝塔係數計算器通膨保值美國國債 TIPS 計算機房貸重新攤還計算機遠期利率計算機債券存續期計算機（麥考利與修正）債券凸性計算機固定指數年金計算機變額年金計算機反向抵押貸款計算機年金支付計算機日本算盤模擬器俄羅斯農民乘法吠陀數學技巧計算機古埃及乘法計算機羅馬數字數學求解器心算訓練器九九乘法表測驗進位與借位視覺化工具數的合成分解生成器硬幣應用題求解器距離速度時間三角形計算機工作效率問題求解器混合問題求解器年齡問題求解器火車相遇問題求解器補水計算機配速卡路里計算機藥物劑量計算機酒精卡路里計算機身體重塑計算機隨機辯論題目產生器隨機聖經經文產生器隨機段落產生器隨機英文句子生成器礫石、砂和表土計算機鋼材重量計算機螺栓扭矩計算機管道流量計算機樑荷載計算機美元換黃金轉換器選擇權機率計算機股票分割計算機員工持股計畫計算機發票滯納金計算機自由工作者時薪計算機租賃與購買比較計算機進階小費分攤計算機行李清單產生器時差反應計算機旅行預算計算機飛行距離計算機熱損失計算機發電成本計算機用水量計算機家電用電成本計算機家庭能源稽核計算機太陽能投資報酬率計算機太陽能板計算機堆肥cn比計算機草坪肥料計算機霜凍日期計算機高床種植箱土壤計算機NPK肥料計算機種子發芽率計算機視訊位元率計算機音樂調性轉換器音樂BPM節拍點擊器照片檔案大小估計計算機百萬畫素到列印尺寸計算機裁切係數計算機曝光三角計算機車輛拖曳能力計算機汽車租賃計算機0–60與四分之一英里計算機電動車充電時間計算機電動汽車續航計算機3D距離計算機環面計算機圓台計算機正多邊形計算機圓錐曲線識別器雙曲線計算機長除法計算機Twitter/X 字元計數機YouTube留言抽選器YouTube標籤提取器YouTube縮圖下載器隨機RPG角色生成器