因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击
新版本弹性盒模型：https://blog.csdn.net/lhjuejiang/article/details/80019673
旧版本弹性盒模型：https://blog.csdn.net/lhjuejiang/article/details/80471369
这里我只是将两者进行对比总结，方便记忆
先说一下我测试的关于弹性盒模型的兼容性的问题吧：IE9及以下是不兼容display:flex的，IE下是没有display:box的，如果你写了display:-ms-box，编译器是会提示有错的，并且编译器提示的时候也是没有display:-ms-box或者display:box的，所以也就是说IE9及以下是不能使用弹性盒模型的
| 新版弹性盒模型 | 旧版弹性盒模型 | |
| 定义容器（设置在父级） | display:flex | display:box |
| 是否需要加浏览器内核前缀 | 不需要 | 一定要加（不支持-ms-） |
主轴方向富裕空间管理 （设置在父级） | justify-content:flex-start|flex-end|center | box-pack:start|end justify和新版的space-between效果一样 |
侧轴（交叉轴）富裕空间管理 （设置在父级） | align-items:flex-start|flex-end|center | box-align:start|end|center |
| 设置主轴方向（设置在父级） | flex-direction:row|row-reverse | box-orient:horizontal（水平）|vertical（垂直） |
| 主轴上元素的排列方向（设置在父级） | 设置主轴的同时就可以设置元素在主轴上的排列方向 | box-direction:reverse|normal |
设置项目的排列顺序（设置在项目上也即子级上。） | order（可以接受0或负值）老版和新版都是数值越小越靠前 | box-ordinal-group:num（最小值默认为1，把0或负值都处理为1） |
| 设置项目的放大比例 | flex-grow:num（默认为0，即即便存在剩余空间也不放大） | box-flex:num |
除了上面的样式的设置，新版本还有一些是老版本没有的
比如新版本可以设置
1、如果一条轴线排不下，如何换行（老版本是不可以换行的）:flex-wrap:nowrap|wrap|wrap-reverse（设置在父级）
2、允许单个项目与其他项目不一样的对齐方式（align-self），可覆盖align-items的属性:默认值为auto,表示继承父元素的align-items属性。align-self:auto|flex-start|flex-end|center|baseline|stretch（设置在项目上，也即子级）
当然还有其他的一些小细节，我这里没有提到，想要了解更多的，我上面提供的链接，讲的很详细哦
我们也看到了，其实新版本的弹性盒模型真的相对于老版本强大多了，那为什么我们还要学老版本呢？呜呜，还不是因为移动端有些浏览器不支持新版本的弹性盒模型，大多数的移动端浏览器是支持老版本的弹性盒模型的，所以即便我们不喜欢老版本，可我们还是要知道的，毕竟现在是移动端的世界