网友提问：display:flex和display:box有什么区别？

display:flex 和 display:box 都是用于创建弹性布局（flexible box layout）的CSS属性值，但它们之间存在一些关键的区别：

1. 规范和兼容性：
   • display:flex 是根据最新的弹性盒模型规范（Flexbox Layout Module Level 1）定义的。它在现代浏览器中得到了广泛的支持，包括IE10及以上版本。
   • display:box 是基于较早的弹性盒模型规范草案，被称为“旧的 flexbox”或“Quirksmode Flexbox”。这种语法在早期的Webkit和Gecko浏览器中被实现，但在最新的规范中已经被废弃。
2. 属性名称和值：
   • 使用 display:flex 时，你将使用如 justify-content, align-items, flex-direction, flex-wrap 等属性来控制布局。
   • 使用 display:box 时，对应的属性是 box-orient, box-pack, box-align, box-lines 等，这些属性在新规范中已经不再使用。
3. 方向性：
   • 在 display:flex 中，主要轴（main axis）和交叉轴（cross axis）的概念被清晰地定义。主要轴的方向由 flex-direction 属性控制，而 justify-content 和 align-items 分别控制主要轴和交叉轴上的对齐方式。
   • display:box 同样有类似的概念，但是属性名称和值与 display:flex 不同，这可能会导致混淆。
4. 浏览器支持和使用建议：
   • 由于 display:flex 被广泛认为是更现代、更标准的弹性盒模型实现，它应该在所有现代Web开发项目中优先使用。
   • display:box 虽然在某些老版本的浏览器中仍然有效，但由于其已被废弃，不应该在新项目中使用。

总的来说，如果你正在开发一个需要跨浏览器兼容性的现代网站，你应该使用 display:flex，并且避免使用 display:box。