從 Chrome 115 開始，CSS 顯示屬性有多個值。 display: flex 變成 display: block flex，display: block 變成 display: block flow。您知道的單一值現在被視為遺留值，但保留在瀏覽器中以實現向後相容性。

為什麼遲到這麼久？

簡而言之：它改變了我們解釋盒子模型等事物的方式。該規範仍然是 CR 快照，這意味著 W3C 會從實施者收集經驗來最終確定該標準。因此，其中一些可能仍會發生變化。

重做將顯示類型分為兩部分：外顯示類型和內顯示類型。

外部顯示類型決定主框本身如何參與流佈局。

內部顯示類型決定了其後代框的佈局方式（替換元素除外，這有點複雜）。

因此 display: flex 變成了 display: block flex 意味著外部顯示類型是區塊（它在外部表現為區塊元素），但其子元素根據 flex 佈局進行渲染。

這與先前的行為相同，但透過此更改，我們可以討論 display 屬性對子元素和周圍元素的影響。在我看來，這種心理模型可以更輕鬆地創建更可預測的佈局，並且更容易解釋不同的佈局模式及其效果。

在較新的課程或教程中，對盒子模型的良好解釋不僅需要涵蓋邊距、邊框、填充、寬度和高度，還需要涵蓋盒子大小和顯示屬性。

顯示屬性的有效值是什麼？

正如已經提到的，現在有些舊財產已經成為遺產。以下是所有有效屬性：

對於多值語法顯示：outer-type inside-type 有效的外部類型為block、inline和run-in。有效的內部顯示類型為flow、flow-root、table、flex、grid 和紅寶石。

還有有效的單一值：list-item、contents 和 none。

最重要的是，CSS 有一些仍然有效的內部顯示值。使用表格或 ruby​​ 顯示類型時將計算這些值。

以下組合現已成為舊版：inline-block、inline-table、inline-flex 和 inline-grid 。它們可以替換為多值等價物，例如：display: inline flex.

現代瀏覽器的最新版本支援多值：https://caniuse.com/mdn-css_properties_display_multi-keyword_values

Caniuse 用來顯示屬性的多關鍵字值。

就這樣了，夥計們！

非常感謝您的閱讀！