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

落日映苍穹つ 2022-05-24 12:52 207阅读 0赞

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

新版本弹性盒模型：[https://blog.csdn.net/lhjuejiang/article/details/80019673][https_blog.csdn.net_lhjuejiang_article_details_80019673]

旧版本弹性盒模型：[https://blog.csdn.net/lhjuejiang/article/details/80471369][https_blog.csdn.net_lhjuejiang_article_details_80471369]

这里我只是将两者进行对比总结，方便记忆

先说一下我测试的关于弹性盒模型的兼容性的问题吧：IE9及以下是不兼容display:flex的，IE下是没有display:box的，如果你写了display:-ms-box，编译器是会提示有错的，并且编译器提示的时候也是没有display:-ms-box或者display:box的，所以也就是说IE9及以下是不能使用弹性盒模型的

<table> 弹性盒模型（新旧对比） 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>新版弹性盒模型</td> 
 <td>旧版弹性盒模型</td> 
 </tr> 
 <tr> 
 <td>定义容器（设置在父级）</td> 
 <td>display:flex</td> 
 <td>display:box</td> 
 </tr> 
 <tr> 
 <td>是否需要加浏览器内核前缀</td> 
 <td>不需要</td> 
 <td>一定要加（不支持-ms-）</td> 
 </tr> 
 <tr> 
 <td>主轴方向富裕空间管理（设置在父级）</td> 
 <td>justify-content:flex-start|flex-end|center&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;space-between|space-around </td> 
 <td>box-pack:start|end&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; center|justifyjustify和新版的space-between效果一样</td> 
 </tr> 
 <tr> 
 <td>侧轴（交叉轴）富裕空间管理（设置在父级）</td> 
 <td>align-items:flex-start|flex-end|center&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;baseline|stretch</td> 
 <td>box-align:start|end|center</td> 
 </tr> 
 <tr> 
 <td>设置主轴方向（设置在父级）</td> 
 <td>flex-direction:row|row-reverse&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; column|column-reverse</td> 
 <td>box-orient:horizontal（水平）|vertical（垂直）</td> 
 </tr> 
 <tr> 
 <td>主轴上元素的排列方向（设置在父级）</td> 
 <td>设置主轴的同时就可以设置元素在主轴上的排列方向</td> 
 <td>box-direction:reverse|normal</td> 
 </tr> 
 <tr> 
 <td>设置项目的排列顺序（设置在项目上也即子级上。）</td> 
 <td>order（可以接受0或负值）老版和新版都是数值越小越靠前</td> 
 <td>box-ordinal-group:num（最小值默认为1，把0或负值都处理为1）</td> 
 </tr> 
 <tr> 
 <td>设置项目的放大比例</td> 
 <td>flex-grow:num（默认为0，即即便存在剩余空间也不放大）</td> 
 <td>box-flex:num</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

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

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

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

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

比如新版本可以设置

1、如果一条轴线排不下，如何换行（老版本是不可以换行的）:flex-wrap:nowrap|wrap|wrap-reverse（设置在父级）

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

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

[https_blog.csdn.net_lhjuejiang_article_details_80019673]: https://blog.csdn.net/lhjuejiang/article/details/80019673
[https_blog.csdn.net_lhjuejiang_article_details_80471369]: https://blog.csdn.net/lhjuejiang/article/details/80471369