flex-basis allows you to specify the initial/starting size of the element,before anything else is computed. It can either be a percentage or an absolute value.
…这本身并没有多说有关flex-basis集合的元素的行为。我目前的知识flexBox我不明白为什么不能描述宽度也。
我想知道在实践中flex-basis与width的不同：
>如果我用柔性基础替换宽度(反之亦然)，什么会在视觉上改变？
>如果我将两者设置为不同的值会发生什么？如果它们具有相同的值，会发生什么？
>有没有一些特殊情况下，使用宽度或弹性基础将有显着的区别，使用其他？
>与其他flexBox样式(如flex-wrap，flex-grow和flex-shrink)结合使用时，宽度和flex-basis如何区别？
>任何其他显着差异？
编辑/澄清：这个问题在What exactly flex-basis property sets?被要求不同的格式，但我觉得一个更直接的比较或总结的弹性基础和宽度(或高度)的差异将是很好的。
解决方法
阅读你的问题时，首先想到的是，flex-basis并不总是适用于width。
当flex-direction为row时，flex-basis控件宽度。
但是当flex-direction是列时，flex-basis控件的高度。
主要差异
以下是基于弹性的基础和宽度/高度之间的一些重要区别：
> flex-basis只适用于flex项目。 Flex容器(也不是flex项)将忽略flex-basis，但可以使用width和height。
> flex-basis只在主轴上工作。例如，如果您在flex-direction：column中，则需要width属性水平调整Flex项目大小。
> flex-basis对绝对定位的flex项没有影响。宽度和高度属性。 Absolutely-positioned flex items do not participate in flex layout。
>通过使用flex属性，flex-grow，flex-shrink和flex-basis这三个属性可以整合到一个声明中。使用宽度，相同的规则将需要多行代码。
浏览器行为
在如何渲染它们，在flex基础和宽度之间应该没有区别，除非flex-basis是auto或content。
从规格：
07001
For all values other than
autoandcontent,flex-basisis resolved the same way aswidthin horizontal writing modes.
但是汽车或内容的影响可能很小或根本没有。更多规格：
07002
When specified on a flex item,the
autokeyword retrieves the value
of the main size property as the usedflex-basis. If that value is
itselfauto,then the used value iscontent.07003
Indicates automatic sizing,based on the flex item’s content.
Note: This value was not present in the initial release of Flexible
Box Layout,and thus some older implementations will not support it.
The equivalent effect can be achieved by usingautotogether with a
main size (widthorheight) ofauto.
因此，根据规范，flex-basis和宽度解决相同，除非flex-basis是auto或内容。在这种情况下，flex-basis可以使用内容宽度(这可能是width属性将使用)。
挠性收缩系数
重要的是记住flex容器的初始设置。其中一些设置包括：
> flex-direction：row – flex项目将水平对齐
> justify-content：flex-start – flex项目将堆叠在主轴线的开始处
> align-items：stretch – flex项目将扩展以覆盖容器的跨尺寸
> flex-wrap：nowrap – flex项目被强制保持在一行
> flex-shrink：1 – 允许flex项收缩
记下最后的设置。
因为默认情况下允许Flex项目收缩(防止它们溢出容器)，所以可以覆盖指定的flex-basis / width / height。
例如，flex-basis：100px或width：100px，加上flex-shrink：1，将不一定是100px。
要渲染指定的宽度并保持其固定，您需要禁用缩小：
div {
width: 100px;
flex-shrink: 0;
}
要么
div {
flex-basis: 100px;
flex-shrink: 0;
}
OR，如规格推荐：
flex: 0 0 100px; /* don't grow,don't shrink,stay fixed at 100px */
07004
Authors are encouraged to control flexibility using the
flexshorthand
rather than with its longhand properties directly,as the shorthand
correctly resets any unspecified components to accommodate 07005.
浏览器错误
影响所有主要浏览器的Bug，IE 11&边缘：
>在调整嵌套flex容器的flex项目大小时发现了一个问题。
当使用width属性时，容器尊重其子项的大小，并相应地扩展。但是当使用flex-basis时，容器忽略其子节点的大小，并且子节点溢出容器。
以下是此行为的三个示例：
> https://jsfiddle.net/t419zhra/(来源：@Dremora)
> https://jsfiddle.net/voc9grx6/(来源：Chromium Bugs)
> https://jsfiddle.net/qjpat9zk/(来源：Chromium Bugs)
更多信息：
> Flex-basis is being ignored when sizing nested flex containers.
> flex-basis:100px does something different from width:100px+flex-basis:auto
> 70014
影响IE 10和11的Bug：
> flex shorthand declarations with unitless flex-basis values are ignored
> flex-basis doesn’t account for box-sizing: border-box
> flex-basis doesn’t support calc()
> Importance is ignored on flex-basis when using flex shorthand
