css: flex-basis vs width

[AndreGeng]

一直感觉这两个属性比较像，有点困惑，今天尝试列举下它们的不同。

1. 首先flex-basis并不一定是拿来和width做对比的，这取决于flex-direction的值，值为column的话，它控制的就是height了，这里假设值为row
2. flex-basis是一个初始值，例如container宽100px, display为flex, 子元素flex-basis设为10px, flex-grow为1. 那得到的结果为flex-basis: 10px; width会变为100px
3. 再者考虑flex-basis的取值，它的合法值除了可以width/height可选的值外，还可以设为content. 既合法值包括数字值，auto, content.
   3.1 对于'auto'和'content'以外的属性值，它的效果和设置width一样
   3.2 对于'auto', 它会去读width的值，如果width也为‘auto’, 那flex-basis的效果与值为‘content’效果一致
   3.3 'content'，基于item内容的大小
4. flex-basis是会被min/max-width所限制的
   ps:

Authors are encouraged to control flexibility using the flex shorthand 
rather than with flex-basis directly, as the shorthand correctly resets 
any unspecified components to accommodate common uses.

Reference:
flex-basis-property