导读 摘要 今天小编跟大家讲解下有关css中flex-basis 和 width 到底有啥区别? ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有...
摘要 今天小编跟大家讲解下有关css中flex-basis 和 width 到底有啥区别? ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css 今天小编跟大家讲解下有关css中flex-basis 和 width 到底有啥区别? ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css中flex-basis 和 width 到底有啥区别? 的相关资料,希望小伙伴们看了有所帮助。
刚才在网上复习flex布局,发现了一篇很不错的文章,虽然是翻译的国外技术贴,看过后,还是对flex有了更深的认识。
先上笔记:
1、flex容器 + flex项目 ==> flex布局。2、justify-content 设置主轴上的对齐方式,默认flex-start,也就是左对齐。3、align-items 设置交叉轴上的对齐方式,默认stretch,也就是拉伸。4、align-content 如果主轴上有多行,它设置对齐方式。不常用。下面是flex项目总结:
1、flex-grow 默认是0,也就是默认项目不放大。2、flex-shrink 默认是1,意味着容器空间不够用的时候,所有项目等比例缩小。3、那么,问题来了flex-basis是个什么鬼?使用时,感觉这家伙和width好像啊,有木有?好像就是设置个宽度而已。那和width有啥关系呢?直接上公式:
content<width<flex-basis(limtedbymax|min-width)划重点了!!!
当我们不设置flex-basis的时候,元素会根据width渲染宽度。如果懒到家,连width都没写,元素就根据自身的宽度渲染。
如果你设置了flex-basis,width就没用了。but,max-width和 min-width 才是最后的大boss,这俩货会严格限制flex-basis。比如:
flex-basis: 100px;width: 80px;// 最终宽度:100pxflex-basis: 100px;min-width:120px;// 最终宽度:120pxflex-basis: 100px;max-width: 60px;// 最终宽度:60px来源:爱蒂网
版权声明:本文由用户上传,如有侵权请联系删除!