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

Question

有关于此的问题和文章，但据我所知，没有定论。我能找到的最好的总结是

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 究竟有何不同:

如果我用 flex-basis 替换宽度(反之亦然)，视觉上会发生什么变化？

如果我将两者都设置为不同的值会发生什么？如果它们具有相同的值会发生什么？

在某些特殊情况下，使用 width 或 flex-basis 与使用另一个会有显着差异吗？

当与 flex-wrap、flex-grow 和 flex-shrink 等其他 flexbox 样式结合使用时，width 和 flex-basis 有何不同？

还有其他显着差异吗？

编辑/澄清 : 这个问题在 What exactly flex-basis property sets? 中以不同的格式提出但我觉得对 flex-basis 和宽度(或高度)的差异进行更直接的比较或总结会很好。

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 元素)将忽略 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-basis property

For all values other than auto and content, flex-basis is resolved the same way as width in horizontal writing modes.

但影响 auto或 content可能很少或根本没有。更多来自规范:

auto

When specified on a flex item, the auto keyword retrieves the value of the main size property as the used flex-basis. If that value is itself auto, then the used value is content.

content

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 auto together with a main size (width or height) of auto.

因此，根据规范， 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 flex shorthand 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属性，容器尊重其子项的大小并相应地扩展。

引用资料:

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 的 flex 元素和 white-space: nowrap溢出 inline-flex容器。 width作品。

似乎 flex 容器设置为 inline-flex无法识别 flex-basis在使用 white-space: nowrap 渲染同级时在子级上(虽然它可能只是一个未定义宽度的元素)。容器不会扩展以容纳物品。

但是当 width使用属性代替 flex-basis ，容器尊重其子项的大小并相应地扩展。这在 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/ (来自上面的第一篇文章)

flex-basis (和 flex-grow )不适用于表格元素

引用资料:

Why does flex-box work with a div, but not a table?

Why doesn't flex-grow: 1 work for a table in Safari? (和边缘)

flex-basis当祖父容器是收缩以适应元素时，Chrome 和 Firefox 会失败。该设置在 Edge 中运行良好。

Absolutely positioned container not expanding width to fit flexbox content

就像上面链接中提供的示例一样，涉及 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()

Importance is ignored on flex-basis when using flex shorthand