有关于此的问题和文章，但据我所知，没有定论。我能找到的最好的总结是
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 究竟有何不同:
编辑/澄清 : 这个问题在 What exactly flex-basis property sets? 中以不同的格式提出但我觉得对 flex-basis 和宽度(或高度)的差异进行更直接的比较或总结会很好。
最佳答案
考虑 flex-direction
阅读您的问题时，首先想到的是 flex-basis并不总是适用于 width .
当flex-direction是 row , flex-basis控制宽度。
但是当 flex-direction是 column , flex-basis控制高度。
主要区别
以下是 flex-basis 之间的一些重要区别和 width/height :
flex-basis仅适用于 flex 元素。 Flex 容器(也不是 Flex 元素)将忽略 flex-basis但可以使用 width和 height . flex-basis仅适用于主轴。例如，如果您在 flex-direction: column , width水平调整 flex 元素需要属性。 flex-basis对绝对定位的 flex 元素没有影响。 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-basispropertyFor all values other than
autoandcontent,flex-basisis resolved the same way aswidthin horizontal writing modes.
但影响
auto或 content可能很少或根本没有。更多来自规范: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.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 using
autotogether with a main size (widthorheight) ofauto.
因此，根据规范，
flex-basis和 width解析相同，除非 flex-basis是 auto或 content .在这种情况下，flex-basis可以使用内容宽度(据推测，width 属性也会使用)。flex-shrink因素记住 flex 容器的初始设置很重要。其中一些设置包括:
flex-direction: row - flex 元素将水平对齐 justify-content: flex-start - flex 元素将堆叠在主轴上的行首align-items: stretch - flex 元素将扩展以覆盖容器的横向尺寸 flex-wrap: nowrap - flex 元素被迫保持在一行flex-shrink: 1 - 允许伸缩元素收缩 注意最后的设置。
因为默认情况下允许伸缩元素收缩(防止它们溢出容器)，指定的
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;
}
或者，按照规范的建议:
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2. Components of Flexibility
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 common uses.
浏览器错误
一些浏览器在调整嵌套 flex 容器中的 flex 项时遇到问题。
flex-basis在嵌套的 flex 容器中被忽略。 width作品。使用时
flex-basis ，容器忽略其子项的大小，子项溢出容器。但随着 width属性，容器尊重其子项的大小并相应地扩展。引用资料:
例子:
使用
flex-basis 的 flex 元素和 white-space: nowrap溢出 inline-flex容器。 width作品。似乎 flex 容器设置为
inline-flex无法识别 flex-basis在使用 white-space: nowrap 渲染同级时在子级上(虽然它可能只是一个未定义宽度的元素)。容器不会扩展以容纳物品。但是当
width使用属性代替 flex-basis ，容器尊重其子项的大小并相应地扩展。这在 IE11 和 Edge 中不是问题。引用资料:
例子:
flex-basis (和 flex-grow )不适用于表格元素引用资料:
flex-basis当祖父容器是收缩以适应元素时，Chrome 和 Firefox 会失败。该设置在 Edge 中运行良好。就像上面链接中提供的示例一样，涉及
position: absolute ，使用float和 inline-block , 也将呈现相同的有缺陷的输出 ( jsfiddle demo )。影响 IE 10 和 11 的错误:
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() flex-basis when using flex shorthand 关于css - flex-basis 和 width 有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34352140/