灵活盒子模型：显示：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）时。这确保了跨浏览器的一致性。

通过了解这些值的差异和浏览器支持，您可以有效地利用灵活的盒模型来创建响应式和适应性强的布局。