以前看规范的时候，感觉这属性讲的太绕，没有去深究，不过不知其所以然的问题终究有一天还是要面对，毕竟明白自己无知就是学习的最大动力了。

百度了一下，看到了一篇靠谱的文章，但是还不够全面，到底谁是原创不太好判定，我就以发布时间最早的为原创帖链接了。

[翻译]Flex Basis与Width的区别

不过，里面推荐的Flexbox Zombies游戏不错，比flexboxfroggy.com界面酷炫多了。

所以，还是老老实实自己动手研究一遍吧。

一、flex-basis的值

Value : content | <'width'>    

Initial : auto    

规范里面是这样定义的。

flex-basis的目的是设置flex item的初始的尺寸，默认是content box的尺寸，如果设置了box-sizing，则以box-sizing的为主。比如设置了box-sizing:border-box，则flex-basis的默认值就是盒子的border box的尺寸。（The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.）

所以，flex-basis的auto这个初始值，默认就是没有设置box-sizing的盒模型下的cotent box的大小。也就是以内容为基准的。

再看value值，content不被谷歌浏览器支持，火狐倒是支持，可惜没啥用。所以这个属性值可以不管了。

<'width'>  这个属性值就和平时使用width属性可以使用的值一样的格式，支持length（带单位的长度，比如40px,3em等）或percentage（百分比）。

二、和width共用的时候的优先级

这里以宽度为例子，高度的原理是一样的。

既然flex-basis可以设置flex item的宽度尺寸，width属性也可以，那到底同时设置的时候，谁听谁的呢？

所以就需要通过程序去验证。

1、当没有设置flex-basis的时候

设置width有用，当flex container的空间足够的时候，使用width的值，当空间不足够的时候，默认flex-shrink收缩起作用，不会溢出容器，此时flex item的宽度就不是width的值了。

2、设置flex-basis为auto的时候

这auto不就是默认值吗，设置与不设置，和第一种情况一样。

说明flex-basis : auto < width

3、设置flex-basis的值为非auto的时候

比如设置了width:200px,flex-basis:150px，则flex-basis的值优先。(in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.)

同样，当flex-basis的值足够大的时候，导致flex container装不下的时候，flex-shrink的收缩能力又让flex item收缩到合适的大小不溢出容器。

所以width < flex-basis为非auto的时候

4、设置了min/max-width的时候

当设置了min/max-width的时候，优先使用min/max-width的值。

所以可以得到这样一个结论：auto是默认值，由内容撑开。width是没有设置flex-basis时的替代选项，min/max-width是flex-basis的下限和上限，并且可以破坏flex-shrink和flex-grow的弹性。

5、当使用flex的时候

为flex设置number的时候，默认是flex:number 1 0,这个时候flex-basis为0%，所以设置width的值依然不起作用。

当flex:none的时候，等价于flex : 0 0 auto,这时width是有作用的。

当flex:auto的时候，等价于flex : 1 1 auto, 这时虽然flex-basis为auto，但是width不起作用。

所以官方文档鼓励作者使用flex速记而不是直接使用flex-basis来控制灵活性，因为该flex速记会正确地重置任何未指定的属性值以适应常见的用途。

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.

好了，虽然没有直接的案例展示，但是逻辑讲清楚了，这篇文章适合已经了解了flexbox的人，如果是一无所知的小白，估计一头雾水，现在写文章变懒了，不再那么详细的贴代码了，估计更多的是方便自己的回顾吧。

当然，使用游戏练习flexbox也是好方法，除了https://flexboxfroggy.com/之外，这款游戏更棒https://mastery.games/flexboxzombies/，贴个图，如果不能玩，请翻墙。