| 瀏覽器 | 首支援完整 Flexbox 版本 | 備註 |
|---|---|---|
| Chrome | 29+ | 無前綴 |
| Firefox | 28+ | 無前綴 |
| Safari | 9+ | 舊版需 -webkit- |
| Edge | 12+ | |
| IE | 11 (部分) | 10 需 -ms-，有眾多 Bug；IE 9 及以下完全不支援 |
| iOS Safari | 9.2+ | |
| Android WebView | 4.4+ | 舊版需 -webkit- |
| 專案需求 | 建議 |
|---|---|
| 需支援 IE 9/10、舊版 Android 4.3- | 不使用 Flexbox，採用 Float/Inline-block/Table 佈局或框架 (Bootstrap 3 grid)。 |
| 僅現代瀏覽器、內網、Hybrid App、移動端優先 | 大膽使用 Flexbox，甚至 Grid，開發效率與維護性極大提升。 |
| 需兼容 IE 11 | 可用 Flexbox，但需： ① Autoprefixer 自動加前綴 ② 避免已知 IE 11 Bug (min-height、flex-basis、align-items: stretch 等) ③ 充分測試 |
.container {
display: flex; /* 現代瀏覽器 */
display: -webkit-flex; /* 舊 WebKit */
display: -ms-flexbox; /* IE 10 */
}
.item {
flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
}
/* 建議：交由 PostCSS + Autoprefixer 自動處理，勿手寫前綴 */2024 年，**新專案無歷史包袱首選 Flexbox/Grid**；維護老專案視具體兼容性矩陣決定。工具鏈 (Webpack/Vite + PostCSS) 已自動解決 99% 前綴問題。
