flex-basis 定义
之前一直没搞明白，flex-basis 这个css 属性到底怎么用，所以即使现在开发当中，也一直在使用width 来设置flex-item的宽度，最近笔者在仔细研究关于flex-basis的用法，写出一些心得，供参考，望指正。
flex-basis属性指定了flex元素在主轴上面的初始大小（笔者通篇文章以横向主轴为例进行讲解）- 在如果不使用
box-sizing属性去修改元素盒模型的情况下，那么这个属性就是该flex元素的初始大小
开发中的问题
-
我在最初对这个初始大小没有什么定义，因为在我所接触的开发环境中，并不需要这个初始大小，通常元素等分弹性盒的空间，只需要去给flex元素设置
flex: 1; -
然而，我也知道
flex: 1;属于css的合成属性flex: 1 0 0%;最后会被浏览器解析为：flex-grow: 1; flex-shrink: 0; flex-basis: 0%; -
但在极个别的环境里,我们如果仅仅给flex元素设置
flex-grow: 1的情况下，就会出现下面的问题
这是为什么呢？
- 一切的原因都是因为，图上的三个flex元素基准尺寸
flex-basis的值为auto - 这就导致原本需要等分的三个盒子，被第一个大盒子占据大半空间
- 这时只需要将其值设置为0px/0%即可
那么，flex-basis 和 width 的区别在哪里？
- 笔者觉得，flex-basis 在有值的情况下，会默认给盒子一个固定大小，如果内容区域超出flex-basis 的值的大小，则盒子大小会自动增长以包裹内容区域
- width 是给盒子一个始终不变的内容区域宽度，即使内容过多超出去，也不会去对空间做任何妥协
总结：
通过本篇文章，让笔者深刻意识到，flex-basis对flex布局的影响其实还是很大的，在工作中需要多加注意。
