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