因为我之前已经将新版本和旧版本的弹性盒模型研究过,并且转载了我认为比较好的文章,所以这里不再对他们进行详细的介绍,如果想要了解更详细的请点击
新版本弹性盒模型: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 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(设置在项目上,也即子级)
当然还有其他的一些小细节,我这里没有提到,想要了解更多的,我上面提供的链接,讲的很详细哦
我们也看到了,其实新版本的弹性盒模型真的相对于老版本强大多了,那为什么我们还要学老版本呢?呜呜,还不是因为移动端有些浏览器不支持新版本的弹性盒模型,大多数的移动端浏览器是支持老版本的弹性盒模型的,所以即便我们不喜欢老版本,可我们还是要知道的,毕竟现在是移动端的世界