摘要 今天小编跟大家讲解下有关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

来源：爱蒂网