Flexbox 互動練習場

Flexbox 速查表

什麼是 Flexbox？

Flexbox（彈性盒子）是 CSS3 的一種佈局模式，用於在容器內快速、靈活地排列、分配和對齐項目。相比浮動和定位，Flexbox 提供了更強大和簡潔的方式來解決常見的佈局問題。它特別適合於一維佈局（單行或單列），例如導航欄、工具欄和響應式設計。

如何使用此工具？

第一步：使用左側面板調整容器屬性（flex-direction、justify-content、align-items 等）

第二步：點擊彩色方塊選擇項目，右側面板會出現項目編輯選項

第三步：調整選中項目的屬性（flex-grow、flex-shrink、order 等）

第四步：實時預覽所有更改，點擊「複製代碼」將生成的 CSS 複製到剪貼板

實際應用案例

導航欄：使用 justify-content 和 align-items 輕鬆排列菜單項

卡片佈局：使用 flex-wrap 和 gap 創建響應式網格

頁面佈局：結合 flex-direction 創建側邊欄和頁腳

完美居中：使用 justify-content: center 和 align-items: center

響應式設計：基於螢幕大小改變 flex-direction 和 flex-wrap

常見問題

flex-grow 和 flex-shrink 有什麼區別？

flex-grow 定義項目在有多餘空間時的擴展比例，flex-shrink 定義項目空間不足時的縮小比例。例如，flex-grow: 2 意味著該項目會佔用兩倍的可用空間。

flex-basis 和 width 有什麼區別？

flex-basis 定義項目在分配剩餘空間前的大小，優先級高於 width。在 Flexbox 中，應優先使用 flex-basis 而不是 width 設置項目大小。

如何讓所有項目等寬？

將所有項目的 flex-grow 設置為 1，flex-basis 設置為 0 或相同的值。或者使用簡寫 flex: 1，這等價於 flex-grow: 1; flex-shrink: 1; flex-basis: 0。

align-content 和 align-items 何時使用？

align-items 對齐單行或單列內的項目，align-content 對齐多行或多列（需要 flex-wrap: wrap）。如果容器中只有一行項目，align-content 不起作用。

為什麼我的 Flexbox 不工作？

常見原因：(1) 父元素沒有設置 display: flex; (2) 子元素有固定寬度或高度，阻止了彈性調整; (3) 混淆了主軸和交叉軸方向; (4) 忘記了 flex-wrap，導致項目溢出。

Flexbox 支持哪些瀏覽器？

Flexbox 在所有現代瀏覽器中都得到很好支持（Chrome、Firefox、Safari、Edge 最新版本）。對於 IE 11 以下，需要使用廠商前綴或備用方案。