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

What are the differences between flex-basis and width?

提问by jpeltoniemi

There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is

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

flex-basisallows 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允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值。

...which in itself doesn't say much about the behavior of elements with flex-basisset. With my current knowledge of flexbox I don't see why that couldn't describe widthalso.

...这本身并没有说明具有flex-basis集的元素的行为。以我目前对 flexbox 的了解，我不明白为什么这也不能描述宽度。

I'd like to know how exactly flex-basisis different from widthin practice:

我想知道flex-basis在实践中与width究竟有何不同：

• If I replace widthwith flex-basis(and vice versa), what will change visually?
• What happens if I set both to a different value? What happens if they have the same value?
• Are there some special cases where using either widthor flex-basiswould have a significant difference to using the other?
• How do widthand flex-basisdiffer when used in conjunction with other flexbox styles, such as flex-wrap, flex-growand flex-shrink?
• Any other significant differences?

• 如果我用flex-basis替换宽度（反之亦然），视觉上会发生什么变化？
• 如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
• 在某些特殊情况下，使用width或flex-basis与使用另一个会有显着差异吗？
• 如何宽度和柔性基础上与其他Flexbox的风格，如配合使用时，不同的柔性包装，柔性成长和弹性收缩？
• 还有其他显着差异吗？

---

---

Edit/clarification: This question has been asked in a different format in What exactly flex-basis property sets?but I felt a more direct comparison or summary of the differences of flex-basisand width(or height) would be nice.

编辑/澄清：这个问题在什么 flex-basis 属性集？但我觉得对flex-basis和width（或height）的差异进行更直接的比较或总结会很好。

回答by Michael Benjamin

Consider flex-direction

考虑 flex-direction

The first thing that comes to mind when reading your question is that flex-basisdoesn't always apply to width.

阅读您的问题时首先想到的是这flex-basis并不总是适用于width.

When flex-directionis row, flex-basiscontrols width.

当flex-direction是 时row，flex-basis控制宽度。

But when flex-directionis column, flex-basiscontrols height.

但是什么时候flex-direction是column，flex-basis控制高度。

---

---

Key Differences

主要区别

Here are some important differences between flex-basisand width/ height:

以下是flex-basis和width/之间的一些重要区别height：

• flex-basisapplies only to flex items. Flex containers (that aren't also flex items) will ignore flex-basisbut can use widthand height.

• flex-basisworks only on the main axis. For example, if you're in flex-direction: column, the widthproperty would be needed for sizing flex items horizontally.

• flex-basishas no effect on absolutely-positioned flex items. widthand heightproperties would be necessary. Absolutely-positioned flex items do not participate in flex layout.

• By using the flexproperty, three properties – flex-grow, flex-shrinkand flex-basis– can be neatly combined into one declaration. Using width, the same rule would require multiple lines of code.

• flex-basis仅适用于弹性项目。Flex 容器（也不是 Flex 项目）将忽略flex-basis但可以使用width和height。

• flex-basis仅适用于主轴。例如，如果您在 中flex-direction: column，则width需要该属性来水平调整 flex 项目的大小。

• flex-basis对绝对定位的弹性项目没有影响。width和height属性将是必要的。绝对定位的弹性项目不参与弹性布局。

• 通过使用flex属性，三种属性- flex-grow，flex-shrink和flex-basis-可整齐地组合成一个声明。使用width，相同的规则需要多行代码。

---

---

Browser Behavior

浏览器行为

In terms of how they are rendered, there should be no differencebetween flex-basisand width, unless flex-basisis autoor content.

就它们的呈现方式而言，和之间应该没有区别，除非是或。flex-basiswidthflex-basisautocontent

From the spec:

从规范：

7.2.3. The flex-basisproperty

For all values other than autoand content, flex-basisis resolved the same way as widthin horizontal writing modes.

7.2.3. 该flex-basis物业

对于除autoand以外的所有值content，flex-basis解析方式与width水平书写模式相同。

But the impact of autoor contentmay be minimal or nothing at all. More from the spec:

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

auto

When specified on a flex item, the autokeyword 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 autotogether with a main size (widthor height) of auto.

auto

当在 flex 项目上指定时，auto关键字检索主要 size 属性的值作为 used flex-basis。如果该值是它本身auto，则使用的值是content。

content

表示根据弹性项目的内容自动调整大小。

注意：该值在弹性框布局的初始版本中不存在，因此一些较旧的实现将不支持它。auto与 的主要大小（width或height）一起使用可以达到等效效果auto。

So, according to the spec, flex-basisand widthresolve identically, unless flex-basisis autoor content. In such cases, flex-basismay use content width (which, presumably, the widthproperty would use, as well).

因此，根据规范，flex-basis并以width相同的方式解析，除非flex-basis是auto或content。在这种情况下，flex-basis可以使用内容宽度（大概width属性也会使用）。

---

---

The flex-shrinkfactor

该flex-shrink因素

It's important to remember the initial settings of a flex container. Some of these settings include:

记住弹性容器的初始设置很重要。其中一些设置包括：

• flex-direction: row- flex items will align horizontally
• justify-content: flex-start- flex items will stack at the start of the line on the main axis
• align-items: stretch- flex items will expand to cover the cross-size of the container
• flex-wrap: nowrap- flex items are forced to stay in a single line
• flex-shrink: 1- a flex item is allowed to shrink

• flex-direction: row- 弹性项目将水平对齐
• justify-content: flex-start- 弹性项目将堆叠在主轴上的行首
• align-items: stretch- 弹性项目将扩展以覆盖容器的横向尺寸
• flex-wrap: nowrap- 弹性项目被迫保持在一行
• flex-shrink: 1- 允许伸缩项目

Note the last setting.

注意最后的设置。

Because flex items are allowed to shrink by default (which prevents them from overflowing the container), the specified flex-basis/ width/ heightmay be overridden.

因为柔性物品被允许通过默认收缩（其防止它们溢出容器），指定的flex-basis/ width/height可以被覆盖。

For example, flex-basis: 100pxor width: 100px, coupled with flex-shrink: 1, will not necessarily be 100px.

例如， flex-basis: 100pxorwidth: 100px加上flex-shrink: 1，不一定是 100px。

To render the specified width – and keep it fixed– you will need to disable shrinking:

要渲染指定的宽度 -并保持固定- 您需要禁用收缩：

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

OR

或者

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

OR, as recommended by the spec:

或者，按照规范的建议：

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.

7.2. 灵活性的组成部分

鼓励作者使用flex速记而不是直接使用其速记属性来控制灵活性，因为速记会正确重置任何未指定的组件以适应常见用途。

---

---

Browser Bugs

浏览器错误

Some browsers have trouble sizing flex items in nested flex containers.

一些浏览器在调整嵌套 flex 容器中的 flex 项时遇到问题。

flex-basisignored in a nested flex container. widthworks.

flex-basis在嵌套的 flex 容器中被忽略。width作品。

When using flex-basis, the container ignores the sizing of its children, and the children overflow the container. But with the widthproperty, the container respects the sizing of its children and expands accordingly.

使用时flex-basis，容器会忽略其子项的大小，子项会溢出容器。但是对于width属性，容器会尊重其子项的大小并相应地扩展。

References:

参考：

• 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

• Chrome 不会根据孩子的内容展开 flex parent
• 使用 flex-basis 时 Flex 项目溢出
• width 和 flex-basis 的区别
• 在调整嵌套 flex 容器的大小时， flex-basis 被忽略。
• flex-basis:100px 与 width:100px+flex-basis:auto 不同

Examples:

例子：

• https://jsfiddle.net/t419zhra/(source: @Dremora)
• https://codepen.io/anon/pen/NVxaoy(source @Daniel)
• https://jsfiddle.net/voc9grx6/(source: Chromium Bugs)
• https://jsfiddle.net/qjpat9zk/(source: Chromium Bugs)

• 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 items using flex-basisand white-space: nowrapoverflow inline-flexcontainer. widthworks.

使用flex-basis和white-space: nowrap溢出inline-flex容器的弹性项目。 width作品。

It seems that a flex container set to inline-flexdoesn't recognize flex-basison a child when rendering a sibling with white-space: nowrap(although it could just be an item with undefined width). The container doesn't expand to accommodate the items.

似乎设置为 的 flex 容器在渲染同级时inline-flex无法识别flex-basis子级white-space: nowrap（尽管它可能只是具有未定义宽度的项目）。容器不会扩展以容纳物品。

But when the widthproperty is used instead of flex-basis, the container respects the sizing of its children and expands accordingly. This is not a problem in IE11 and Edge.

但是当使用该width属性而不是 时flex-basis，容器会尊重其子项的大小并相应地扩展。这在 IE11 和 Edge 中不是问题。

References:

参考：

• inline flex container width not growing
• Inline flex container (display: inline-flex) is expanding the full width of parent container

• 内联 flex 容器宽度没有增长
• 内联 flex 容器（显示：inline-flex）正在扩展父容器的全宽

Example:

例子：

• https://jsfiddle.net/p18h0jxt/1/(from first post above)

• https://jsfiddle.net/p18h0jxt/1/（来自上面的第一篇文章）

---

---

flex-basis(and flex-grow) not working on table element

flex-basis（和flex-grow）不适用于表格元素

References:

参考：

• Why does flex-box work with a div, but not a table?
• Why doesn't flex-grow: 1 work for a table in Safari?(and Edge)

• 为什么 flex-box 与 div 一起工作，而不是一个表格？
• 为什么 flex-grow: 1 不适用于 Safari 中的表格？（和边缘）

---

---

flex-basisfails in Chrome and Firefox when the grandparent container is a shrink-to-fit element. The set-up works fine in Edge.

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

• Absolutely positioned container not expanding width to fit flexbox content

• 绝对定位的容器不会扩展宽度以适应 flexbox 内容

Like in the example presented in the link above, involving position: absolute, the use of floatand inline-block, will also render the same flawed output (jsfiddle demo).

就像在上面的链接提交，涉及的例子中position: absolute，使用float和inline-block，也将呈现相同的有缺陷的输出（的jsfiddle演示）。

---

---

Bugs affecting IE 10 and 11:

影响 IE 10 和 11 的错误：

• flexshorthand declarations with unitless flex-basisvalues are ignored
• flex-basisdoesn't account for box-sizing: border-box
• flex-basisdoesn't support calc()
• Importance is ignored on flex-basiswhen using flexshorthand

• flexflex-basis忽略具有无单位值的速记声明
• flex-basis不考虑 box-sizing: border-box
• flex-basis不支持 calc()
• flex-basis使用flex速记时忽略重要性

回答by Paulie_D

In addition to Michael_B's excellent summary it's worth repeating this:

除了 Michael_B 出色的总结之外，值得重复一遍：

flex-basis allows you to specify the initial/startingsize of the element, before anything else is computed. It can either be a percentage or an absolute value.

flex-basis 允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值。

The important part here is initial.

这里的重要部分是initial。

By itself, this does resolve to width/height untilthe other flex grow/shrink properties come into play.

就其本身而言，这确实会解析为宽度/高度，直到其他 flex 增长/收缩属性发挥作用。

So. a child with

所以。一个孩子

.child {
 flex-basis:25%;
 flex-grow:1;
}

will be 25% wide initially but then immediately expand as much as it can until the other elements are factored in. If there are none..it will be 100% wide/tall.

最初将是 25% 宽，然后立即尽可能多地扩展，直到其他元素被考虑在内。如果没有......它将是 100% 宽/高。

A quick demo:

快速演示：

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}

<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

Experimenting with the flex-grow, flex-shrinkand flex-basis(or the shorthand flex :fg fs fb)...can lead to some interesting results.

尝试使用flex-grow,flex-shrink和flex-basis（或简写flex :fg fs fb）...可以得到一些有趣的结果。

回答by Niet the Dark Absol

Possibly the most important point to add:

可能最重要的一点是：

What if the browser doesn't support flex? In such a case, width/heighttake over and their values apply.

如果浏览器不支持flex怎么办？在这种情况下，width/height接管并适用它们的值。

It is a very good idea - almost essential - to define width/heighton elements, even if you then have a completely different value for flex-basis. Remember to test by disabling display:flexand seeing what you get.

定义width/height元素是一个非常好的主意——几乎是必不可少的——即使你有一个完全不同的flex-basis. 请记住通过禁用display:flex并查看您得到的内容来进行测试。