有很多关于这方面的问题和文章，但据我所知，没有任何结论。我能找到的最好的总结是
flex basis允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值
…这本身并不能说明flex basis集合中元素的行为。以我目前对flexbox的了解，我不明白为什么它不能描述宽度
我想知道弹性基础与宽度在实践中的具体区别：
- 如果我将宽度替换为柔性基础（反之亦然），视觉上会发生什么变化
- 如果我将两者都设置为不同的值，会发生什么？如果它们具有相同的值，会发生什么
- 在某些特殊情况下，使用宽度或弹性基础会与使用其他基础有显著差异吗
- 当与其他flexbox样式（例如flex wrap、flex grow和flex shrink）一起使用时，宽度和flex basis有何不同
- 还有其他显著差异吗
编辑/澄清：这个问题以不同的格式提出，具体是什么样的flex basis属性集？但我觉得更直接地比较或总结弹性基础和宽度（或高度）的差异会更好
考虑弯曲方向
阅读问题时首先想到的是flex-basis并不总是适用于width
当弹性方向为行时，弹性基准控制宽度
但当flex-direction为column时，flex-basis控制高度
关键区别
以下是弹性基础和宽度/高度之间的一些重要区别：
-
弹性基础仅适用于弹性项目。弹性容器（不属于弹性项目）将忽略Flex-basis，但可以使用width和height -
flex basis仅在主轴上工作。例如，如果您位于flex-direction:column，则需要width属性来水平调整flex项目的大小 -
flex-basis对绝对定位的flex项目没有影响宽度和高度属性是必需的。绝对定位的flex项目不参与flex布局 -
通过使用
flex属性，有三个属性&ndash弹性增长，弹性收缩和弹性基础&ndash；可以整齐地组合成一个声明。使用宽度，相同的规则将需要多行代码
浏览器行为
就呈现方式而言，flex-basis和width之间应该没有差异，除非flex-basis是auto或content
来自规范：
7.2.3。
弹性基础属性对于除
auto和content以外的所有值，flex basis的解析方式与水平写入模式下的width相同
但是auto或content的影响可能很小，或者根本没有影响。规范中的更多内容：
自动在弹性项上指定时，
auto关键字检索值
作为所使用的弹性基础的主尺寸属性的。如果该值为
本身auto，则使用的值为content
内容表示根据弹性项的内容自动调整大小
注意：此值在Flexible的初始版本中不存在
框布局，因此一些旧的实现将不支持它。
使用auto和
auto的主要尺寸（width或height）
因此，根据规范，flex-basis和width解析相同，除非flex-basis是auto或content。在这种情况下，flex basis可能会使用内容宽度（据推测，width属性也会使用内容宽度）
弹性收缩系数
记住flex容器的初始设置很重要。其中一些设置包括：
弹性方向：行-弹性项目将水平对齐justify content:flex start-flex项将堆叠在主轴上的行的开始处对齐项目：拉伸-弹性项目将扩展以覆盖容器的交叉尺寸flex wrap:nowrap-flex项目被强制保留在一行中弹性收缩：1-弹性项目允许收缩
注意最后一个设置
由于默认情况下允许弹性项目收缩（防止其溢出容器），因此可以覆盖指定的弹性基准/宽度/高度
例如，flex-basis:100px或width:100px，加上flex-shrink:1，不一定是100px
渲染指定宽度的步骤&ndash并将其固定&ndash；您需要禁用收缩功能：
div{
宽度：100px；
弹性收缩：0；
}
或
div{
弹性基准：100px；
弹性收缩：0；
}
或者，按照规范的建议：
flex:0 100px；/*不要增长，不要收缩，保持固定在100像素*/
7.2。组成部分
灵活性鼓励作者使用
flex速记控制灵活性
而不是直接用它的速记属性，如速记
正确重置任何未指定的组件，以适应常见的
使用
浏览器错误
某些浏览器无法在嵌套的flex容器中调整flex项的大小
flex-basis在嵌套flex容器中被忽略宽度有效
使用flex basis时，容器忽略其子容器的大小，子容器溢出容器。但是使用width属性，容器会考虑其子容器的大小，并相应地进行扩展
参考资料：
- Chrome不会根据子项扩展flex父项'；内容
- 使用弹性基准时弹性项目溢出
- 宽度和弹性基础之间的差异
- 调整嵌套Flex容器大小时忽略Flex basis
- 弹性基准：100px与宽度：100px+弹性基准：自动不同
示例：
- https://jsfiddle.net/t419zhra/ （来源：@Dremora）
- https://codepen.io/anon/pen/NVxaoy （来源：丹尼尔）
- https://jsfiddle.net/voc9grx6/ （来源：Chromium Bugs）
- https://jsfiddle.net/qjpat9zk/ （来源：Chromium Bugs）
使用flex-basis和white-space:nowrapoverflowinline-flexcontainer来调整项目宽度有效
当使用空白：nowrap呈现兄弟姐妹时，设置为内联flex的flex容器似乎无法识别子级上的flex basis（尽管它可能只是一个宽度未定义的项）。容器不会展开以容纳项目
但是当使用width属性而不是flex basis时，容器会考虑其子容器的大小并相应地扩展。这在IE11和Edge中不是问题
参考资料：
- 内联flex容器宽度未增长
- 内联flex容器（显示：内联flex）正在扩展父容器的全宽
例如：
- https://jsfiddle.net/p18h0jxt/1/ （从上面的第一个帖子）
flex-basis（和flex-grow）不处理表元素
参考资料：
- 为什么flex box与div一起工作，而不是与表一起工作
- 为什么'；t flex grow:1在Safari中为桌子工作？（和边缘）
flex basis在Chrome和Firefox中失败，因为祖父母容器是一个收缩到适合的元素。这个装置在边缘处工作得很好
- 绝对定位的容器未扩展宽度以适应flexbox内容
与上面链接中的示例一样，涉及到position:absolute，使用float和inline block，也将呈现相同的有缺陷的输出（jsfiddle演示）
影响IE 10和11的bug：
flex忽略带有无单位flex基值的速记声明flex basis不考虑框大小：边框框flex basis不支持calc（）- 使用
flex速记时，在flex基础上忽略重要性