靈活盒子模型：顯示：flex、box、flexbox

CSS3中靈活盒子模型的引入徹底改變了我們的設計方式佈局。然而，顯示屬性（flex、box、flexbox）存在多個值可能會導致混亂。

理解差異

這三個值本質上是不同的同一模型的語法。它們都實現了靈活的框架佈局規範，該規範提供了對元素佈局和定位的增強控制。不過，瀏覽器支援上有一些細微的差別：

• display: box: 在 Firefox 2.0 和 Chrome 4.0 中引入，支援有限且換行未完全實現。
• display: flexbox: 在Chrome 17 和Internet Explorer 10（帶前綴）中可用，已被逐步淘汰支持flex.
• display: flex: 目前標準，受Chrome、Firefox、Safari 和Internet Explorer 11 等現代瀏覽器支援。

使用哪個值？

值的選擇取決於瀏覽器相容性要求。如果需要支援 Firefox 2.0 等舊版瀏覽器，您可能需要使用 display: box。然而，為了獲得最佳的兼容性和靈活性，display: flex是推薦的選擇。

注意：
通常建議同時包含flex和box程式碼中的屬性，尤其是針對支援 Flexbox 規範的舊版瀏覽器（例如​​ IE10）時。這確保了跨瀏覽器的一致性。

透過了解這些值的差異和瀏覽器支持，您可以有效地利用靈活的盒子模型來創建響應式和適應性強的佈局。