考虑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属性是必需的。绝对定位的flex项不参与flex布局。
• 通过使用flex属性，三个属性flex-grow、flex-shrink和flex-basis可以整齐地组合到一个声明中。如果使用width，同样的规则需要多行代码。

浏览器行为

就如何渲染而言，flex-basis和width之间应该没有差异，除非flex-basis是auto或content。

• 从规格：*
  7.2.3. flex-basis属性

对于除auto和content以外的所有值，flex-basis的解析方式与水平写入模式下的width相同。
但是auto或content的影响可能很小，或者根本没有影响。更多关于spec：

auto

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

content

指示基于Flex项的内容自动调整大小。

• 注意：这个值在Flexible Box Layout的初始版本中不存在，因此一些较旧的实现将不支持它。通过将auto与auto的主尺寸（width或height）一起使用，可以实现相同的效果。*

因此，根据规范，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项（这可以防止它们溢出容器），所以指定的flex-basis/width/height可能会被覆盖。
例如，flex-basis: 100px或width: 100px与flex-shrink: 1结合，不一定是100 px。
要渲染指定的宽度- * 并保持其固定 * -您需要禁用收缩：

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.灵活性的组成

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

浏览器Bug

一些浏览器在调整嵌套的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/（来源：@德雷莫拉）
• https://codepen.io/anon/pen/NVxaoy（来源@丹尼尔）
• https://jsfiddle.net/voc9grx6/（来源：Chromium Bugs）
• https://jsfiddle.net/qjpat9zk/（来源：Chromium Bugs）

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

当呈现具有white-space: nowrap的同级时，设置为inline-flex的flex容器似乎无法识别子容器上的flex-basis（尽管它可能只是一个未定义宽度的项）。容器不会展开以容纳这些项。
但是，当使用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?（和Edge）

flex-basis在Chrome和Firefox中当祖父容器是收缩到适合元素时失败。设置在Edge中工作正常。

• Absolutely positioned container not expanding width to fit flexbox content

与上面链接中的示例一样，使用float和inline-block也会呈现相同的错误输出（jsfiddle demo）。

影响IE 10和11的bug：

• 忽略flex无单位值的速记声明
• flex-basis不包含box-sizing: border-box
• flex-basis不支持calc()
• 使用flex速记时，忽略flex-basis上的重要性

除了Michael_B的精彩总结之外，值得重复的是：
flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小。它可以是百分比或绝对值。
这里最重要的部分是initial。
就其本身而言，这确实会解析为width/height *，直到 * 其他flex grow/shrink属性开始起作用。
所以...一个有...

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

最初将是25%宽，但随后立即尽可能多地扩展，直到其他元素被考虑在内。如果没有的话。.它将是100%宽/高。
快速演示：

.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>

使用flex-grow、flex-shrink和flex-basis（或简写为flex :fg fs fb）进行实验。...会带来一些有趣的结果。

flex-basis和width（或height，取决于当前的写入模式）之间有一个关键的区别，除了灵活的大小调整方面（flex-grow: 0; flex-shrink: 0;）。
它源于Flex Layout中的异常，Flex项目的自动最小大小默认为min-content，而不是通常的0。换句话说，默认的min-width: auto计算为min-content，而不是0。
结果是flex-basis（默认情况下）被min-content绑定在下面。如果指定一个小于min-content的值，例如flex-basis: 0，它将计算为min-content。这基本上意味着（默认情况下）您不能使框的内容溢出，因为框至少具有内容的大小。
这是与width的一个关键区别，width可以将框的大小设置为任意小（默认情况下），因为min-width默认为0。如果width的值小于min-content，则内容将溢出盒子。
规范中提到了这种行为，但只是在7结尾的错误地方的注解中隐式地提到了。1.1. flex的基本值。
默认情况下，Flex项不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。若要更改此属性，请设置min-width或min-height属性。（参见§ 4.5 Flex项目的自动最小大小。）
正如注解中提到的，设置最小大小会降低边界，将其设置为零会有效地禁用它，使flex-basis再次按预期运行。
但也有缺点。首先，主轴没有最小尺寸属性。您必须为当前flex-direction使用正确的min-width/min-height或min-block-size/min-inline-size属性。如果更改了flex-direction，则需要再次找到正确的最小大小属性。
其次，flex-basis不能再用于按比例分配空间，而不是简单地增加其初始大小。有关更多详细信息，请参见规范中的图7。
这里有一个最小的例子。设置min-width: 0使flex-basis再次按预期运行。

.container {
  display: flex;
}

.container div {
  background-color: lightgrey;
  border: 1px solid black;
  margin: 0 10px;
  /* disable any flexible sizing */
  flex-grow: 0;
  flex-shrink: 0;
  /* TOGGLE ME */
  /* min-width: 0; */
}

.mincontent {
  width: min-content;
}

.smallerflexbasis {
  flex-basis: 3ex;
}

.smallerwidth {
  width: 3ex;
}

<div class="container">
  <div class="mincontent">Lorem ipsum</div>
  <div class="smallerflexbasis">Lorem ipsum</div>
  <div class="smallerwidth">Lorem ipsum</div>
</div>

可能最重要的一点是：
如果浏览器不支持flex怎么办？在这种情况下，width/height接管并应用它们的值。
在元素上定义width/height是一个非常好的主意--几乎是必不可少的--即使你有一个完全不同的flex-basis值。请记住，通过禁用display:flex进行测试，看看您得到了什么。

如果你在 Package 的话就不一样了。
比如说，你把一个子对象设置为width:0，并期望它能换行，但这是不可能的。但是对于flex-basis:0，它会换行。（前提是未隐藏溢出）

如果你设置一个div的min-width:600px，如果窗口大小低于600px，你会看到一个水平滚动条，这不是一个好的ux设计。
如果你设置它的flex-basis:600px，如果窗口大小低于600px，那个盒子会缩小，你不会看到一个水平条。
请注意，flex-basis仅适用于flex项。