我是靠谱客的博主 沉静未来,最近开发中收集的这篇文章主要介绍flex布局中width和flex-basis区别,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

flex-basis只要flex布局中才会产生作用,但是with不是,如果两者共用会有怎么样的变化,我拿了56版本的firfox,IE11,以及68版本的chrome进行了实验:
68版本的chrome
1.当不设置width和flex-basis时,宽度默认为内容自身的宽度

2.设置width,不设置flex-basis,宽度正常随着width走,但是当width小于0时,则宽度恢复为自身内容宽度,这个就不放图了

3.不设置width,设置flex-basis,当flex-basis设置值小于自身内容宽度时,flex-basis不生效,不管是正值还是负值。当flex-basis设置值大于自身内容宽度时,相应宽度也会正常增加。
在这里插入图片描述
4.同时设置width,又设置flex-basis,当flex-basis大于自身内容宽度时,不管width是否设置,flex-basis优先级高。
当flex-basis和width都小于自身内容宽度时,flex-basis和width哪个值大,宽度就是那个。
当flex-basis设置值小于自身内容宽度,而width大于自身宽度时,则宽度为自身内容宽度。
在这里插入图片描述
56版本的firfox:
1.当不设置width和flex-basis时,宽度默认为内容自身的宽度

2.设置width,不设置flex-basis,宽度正常随着width走,但是当width小于0时,则宽度恢复为自身内容宽度

3.不设置width,设置flex-basis,当flex-basis设置值小于自身内容宽度时,flex-basis不生效,不管是正值还是负值。当flex-basis设置值大于自身内容宽度时,相应宽度也会正常增加。这个和Chrome是一致。

4.同时设置width,又设置flex-basis,当flex-basis大于自身内容宽度时,不管width是否设置,flex-basis优先级高。
当flex-basis>=0和width都小于自身内容宽度时,宽度任然是自身内容宽度。但当flex-basis小于0时,也就这个属性不会生效,所以也就是width的宽度值。
在这里插入图片描述
当flex-basis设置值小于自身内容宽度,而width大于自身宽度时,则宽度为自身内容宽度。这个和chrome也是一样的。

IE11:
1.当不设置width和flex-basis时,宽度默认为内容自身的宽度

2.设置width,不设置flex-basis,宽度正常随着width走,但是当width小于0时,则宽度恢复为自身内容宽度。

3.不设置width,设置flex-basis,当flex-basis只要>=0,宽度都会正常生效。
在这里插入图片描述
4.同时设置width,又设置flex-basis,当flex-basis大于自身内容宽度时,不管width是否设置,flex-basis优先级高。
当flex-basis和width都小于自身内容宽度时,只要flex-basis>=0,width就是flex-basis,否则就是width。
在这里插入图片描述
总结:flex-basis的不允许小于0,小于0的话这个属性就相当于不存在,在IE下还会提示错误,所以都是随着width走。
当flex-basis>=0时,chrome下如果flex-basis小于自身内容宽度,则如果 width也设置了,那么flex-basis和width哪个值大就取哪个值。flex-basis<0时则为width的宽度。
firfox只有flex-basis>=0且小于自身内容宽度,width不管设没设,宽度任然是自身内容宽度,其他和chrome是一致的。
IE只要flex-basis>=0,宽度就是flex-basis。

最后

以上就是沉静未来为你收集整理的flex布局中width和flex-basis区别的全部内容,希望文章能够帮你解决flex布局中width和flex-basis区别所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(44)

评论列表共有 0 条评论

立即
投稿
返回
顶部