CSS3 的最新進展引入了靈活盒子模型,它比傳統方法。然而,多個顯示屬性值的存在會造成混亂:flex、box 和 flexbox。
這三個值有不同的瀏覽器支援等級:
選擇取決於目標瀏覽器和所需的效果。為了與目前和舊版瀏覽器相容,建議同時使用 display: flexbox 和 display: flex 。如果您需要特別舊的瀏覽器支持,則可能需要帶有前綴的 display: box。
下表總結了每個值的瀏覽器支援:
Display Value | Chrome | Firefox | Safari/iOS | IE |
---|---|---|---|---|
display: box | 4.0 (prefixed) | 2.0 (prefixed) | 3.1 (prefixed) | 10 (prefixed) |
display: flexbox | 17 (prefixed) | N/A | 7 (prefixed) | 10 (prefixed) |
display: flex | 21 (prefixed), 29 (unprefixed) | 22 (unprefixed) | N/A | 11 (unprefixed) |
需要注意的是,隨著時間的推移,瀏覽器可能會放棄對舊值的支持,因此鼓勵使用當前的Flex 標準以實現未來的兼容性。
以上是Flex、Box 或 Flexbox:您應該使用哪種 CSS 顯示屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!