弹性盒模型新旧版本对比总结

因为我之前已经将新版本和旧版本的弹性盒模型研究过，并且转载了我认为比较好的文章，所以这里不再对他们进行详细的介绍，如果想要了解更详细的请点击

新版本弹性盒模型：https://blog.youkuaiyun.com/lhjuejiang/article/details/80019673

旧版本弹性盒模型：https://blog.youkuaiyun.com/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                        space-between|space-around	box-pack:start|end                 center|justify justify和新版的space-between效果一样
侧轴（交叉轴）富裕空间管理 （设置在父级）	align-items:flex-start|flex-end|center                    baseline|stretch	box-align:start|end|center
设置主轴方向（设置在父级）	flex-direction:row|row-reverse                       column|column-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

注意：align-items: flex-end;元素在侧轴结束位置，富裕空间在侧轴开始位置     

         -webkit-box-align: end;   元素在侧轴结束位置，富裕空间在侧轴开始位置

       flex-flow:num（子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和）

除了上面的样式的设置，新版本还有一些是老版本没有的

比如新版本可以设置

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（设置在项目上，也即子级）

当然还有其他的一些小细节，我这里没有提到，想要了解更多的，我上面提供的链接，讲的很详细哦

我们也看到了，其实新版本的弹性盒模型真的相对于老版本强大多了，那为什么我们还要学老版本呢？呜呜，还不是因为移动端有些浏览器不支持新版本的弹性盒模型，大多数的移动端浏览器是支持老版本的弹性盒模型的，所以即便我们不喜欢老版本，可我们还是要知道的，毕竟现在是移动端的世界