css - flex-basis和width有什么区别？

Question

关于这一点，有很多问题和文章，但据我所知，没有什么结论。我能找到的最好的总结是
flex basis允许您在计算任何其他元素之前指定元素的初始/起始大小。它可以是百分比，也可以是绝对值。
…这本身并没有说明使用flex基集的元素的行为。以我目前对flexbox的了解，我不明白为什么不能同时描述宽度。
我想知道在实践中弹性基础和宽度到底有什么不同：
如果我将宽度替换为弹性基础（反之亦然），视觉上会有什么变化？
如果我将两者设置为不同的值，会发生什么情况？如果它们有相同的价值会发生什么？
在某些特殊情况下，使用宽度或弹性基础与使用其他基础有显著差异吗？
当与其他flexbox样式（如flex wrap、flex grow和flex shrink）结合使用时，宽度和flex basis有何不同？
还有其他显著差异吗？
编辑/澄清：这个问题在What exactly flex-basis property sets?中以不同的格式提出，但我觉得更直接地比较或总结弹性基础和宽度（或高度）的差异会更好。

Answer 1

考虑flex-direction
阅读问题时首先想到的是flex-basis并不总是适用于width。
当flex-direction为row时，flex-basis控制宽度。
但当flex-direction是column时，flex-basis控制高度。
主要区别
以下是flex-basis和width/height之间的一些重要区别：
flex-basis仅适用于弹性项。Flex容器（也不是Flex项）将忽略flex-basis，但可以使用width和height。
flex-basis只在主轴上工作。例如，如果您在flex-direction: column中，则需要width属性来水平调整flex项的大小。
flex-basis对绝对定位的弹性项目没有影响。width和height属性是必需的。Absolutely-positioned flex items do not participate in flex layout。
通过使用flex属性，可以将flex-grow、flex-shrink和flex-basis三个属性巧妙地组合成一个声明。使用width，同一规则将需要多行代码。
浏览器行为
就渲染方式而言，flex-basis和width之间应该没有区别，除非flex-basis是auto或content。
从规范：
7.2.3. The flex-basis property
对于除auto和content之外的所有值，flex-basis的解析方式与水平写入模式中的width相同。
但是auto或content的影响可能很小，或者根本没有影响。规范中的更多内容：
auto
在flex项上指定时，auto关键字将检索该值
的主大小属性。如果这个值是
本身flex-basis，则使用的值为auto。
content
表示根据flex项的内容自动调整大小。
注意：此值不存在于最初的柔性版本中。
Box布局，因此一些较旧的实现将不支持它。
将content与
auto的主要大小（width或height）。
因此，根据规范，auto和flex-basis的解析是相同的，除非width是flex-basis或auto。在这种情况下，content可能会使用内容宽度（也可能会使用flex-basis属性）。
width因子
记住flex容器的初始设置很重要。其中一些设置包括：
flex-shrink-弹性项将水平对齐
Flex项目将在主轴线的开始处堆叠。
flex-direction: row-柔性项目将扩展以覆盖容器的交叉尺寸
justify-content: flex-start-弹性项被迫保持在一行中
align-items: stretch-允许弹性项收缩
注意最后的设置。
由于默认情况下允许flex项收缩（这可以防止它们溢出容器），因此可以覆盖指定的flex-wrap: nowrap/flex-shrink: 1/flex-basis。
例如，width或height加上flex-basis: 100px，不一定是100px。
要渲染指定的宽度并保持其固定，需要禁用收缩：

div {
   width: 100px;
   flex-shrink: 0;
}  

或者

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

或者，按照规范的建议：

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. Components of Flexibility
鼓励作者使用 width: 100px速记来控制灵活性。
而不是像速记那样直接用它的长笔性质
正确重置任何未指定的组件以适应 common uses。
浏览器错误
有些浏览器在调整嵌套flex容器中flex项的大小时遇到问题。
flex-shrink: 1在嵌套的flex容器中被忽略。 flex有效。
使用 flex-basis时，容器忽略其子级的大小，子级会溢出容器。但使用 width属性时，容器会尊重其子级的大小并相应地扩展。
参考文献：
Chrome does not expand flex parent according to children's content
Flex item overflowing when using flex-basis
Difference between width and flex-basis
Flex-basis is being ignored when sizing nested flex containers.
flex-basis:100px does something different from width:100px+flex-basis:auto
示例：
https://jsfiddle.net/t419zhra/（来源： @Dremora）
https://codepen.io/anon/pen/NVxaoy（来源 @Daniel）
https://jsfiddle.net/voc9grx6/（来源： Chromium Bugs）
https://jsfiddle.net/qjpat9zk/（来源： Chromium Bugs）
使用 flex-basis和 width溢出 flex-basis容器调整项目。 white-space: nowrap有效。
设置为 inline-flex的flex容器在呈现具有 width的同级对象时似乎无法识别子对象上的 inline-flex（尽管它可能只是宽度未定义的项）。容器无法扩展以容纳项目。
但是当使用 flex-basis属性而不是 white-space: nowrap时，容器会尊重其子级的大小并相应地扩展。这在IE11和Edge中不是问题。
参考文献：
inline flex container width not growing
Inline flex container (display: inline-flex) is expanding the full width of parent container
例子：
https://jsfiddle.net/p18h0jxt/1/（从上面第一个帖子开始）
width（和 flex-basis）不处理表元素
参考文献：
Why does flex-box work with a div, but not a table?
Why doesn't flex-grow: 1 work for a table in Safari?（和Edge）
影响IE 10和11的错误：
flex-basis shorthand declarations with unitless flex-grow values are ignored
flex doesn't account for flex-basis
flex-basis doesn't support box-sizing: border-box
Importance is ignored on flex-basis when using calc() shorthand