Flex、Box 或 Flexbox：您应该使用哪个显示值？

灵活盒子模型：导航“flex”、“box”和“flexbox”值

灵活盒子模型的出现CSS3 中引入了范式转变，逐步淘汰传统的显示属性值，例如内联和块。然而，弹性盒模型常常以各种值的形式呈现，包括flex、box、flexbox等。本文深入探讨了这些值之间的差异，并提供了它们的使用指导。

显示：flex

显示：flex 是当前标准值。它支持现代浏览器，包括 Chrome 29 、 Firefox 22 、 Safari 7 和 Internet Explorer 11 。 Flex 提供了布局管理的高级功能，包括沿水平轴和垂直轴对齐和分布项目的能力。

Display: box

Display: box 是较旧的早期在灵活盒子模型开发中引入的值。大多数带有供应商前缀的主要浏览器都支持它，但通常会被逐步淘汰，以支持 display: flex。

Display: flexbox

Display: flexbox 是另一个中间值引入它是为了桥接从 display: box 到 display: flex 的过渡。它在具有供应商前缀的较新浏览器中受支持，并且在功能方面类似于 display: flex。

使用哪个值？

最终，在这些值之间进行选择值取决于您需要支持的浏览器。如果您需要向后兼容，请考虑使用带有浏览器前缀的 display: box。对于更现代的浏览器支持，建议使用 display: flex 选项。

附加说明

• 盒子规格与 flexbox/flex 规格有很大不同，可能并不总是适合达到预期的结果。
• 某些浏览器可能支持多个显示值。不过，为了面向未来，建议尽可能包含 Flex 属性。
• 查看 caniuse.com/#feat=flexbox 以获取全面的浏览器支持信息。

以上是Flex、Box 或 Flexbox：您应该使用哪个显示值？的详细内容。更多信息请关注PHP中文网其他相关文章！