flex-basis 和 width 有什么区别？

但自动或内容的影响很小或没有影响。更多关于标准：

auto

在 Flex 中指定时，auto 关键字会检索该值的主要尺寸属性作为要使用的 Flex 控制台。如果值本身是自动的，则使用的值就是内容。

content

表示根据柔性对象的内容自动调整大小。

注意：该值不存在于原始版本Flexible 的框布局中，因此一些较旧的实现不支持它。自动和a结合可以得到同样的效果

根据规范，flex-Konfutse 和宽度解析是相同的，除非 flex-Konfutse 是 auto 或 content。在这种情况下，flex-Konfutse可以使用内容的宽度（也可以使用宽度）。

flex-shrink问题

记住 Flex 容器的初始设置非常重要。这些设置包括：

• flex-direction: row
• justify-content: flex-start
• align-items: stretch
• flex-wrap: nowrap
• flex-shrink: 1

由于默认情况下允许 flex 元素收缩（防止它们溢出容器），因此可以覆盖指定的 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;
}

还有另一种标准和推荐方法：

浏览器错误

适用于除 ie11 和 Edge 之外的所有常见浏览器：

flex basis在嵌套的 Flex 容器中被忽略，宽度是有用的。

使用 Flex-Konfutse 时，容器会忽略子容器的大小，并且子容器会溢出容器。但在 width 属性中，容器会考虑其子元素的大小并相应地扩展。这在 IE11 和 Edge 中不是问题。

参考：

• Chrome 不会根据子内容扩展灵活的父项
• 宽度和弯曲的区别basis
• 确定嵌套 Flex 容器的大小时，Flex-basis 将被忽略。
• flex-basis:100px 的作用与 width:100px+flex-basis:auto

案例：

• https://jsfiddle.net/t419zhra/（来源：@Dremora）
• https://jsfiddle.net/voc9grx6/（来源：Chromium Bugs）
• https://jsfiddle.net/qjpat9zk/（来源：Chromium Bugs）

使用 flex-basis 和空白的 Flex 项目：nowrap 填充 inline-flex 容器。宽度有效。

看起来，设置为 inline-flex 的 Flex-container 在使用空白渲染其同级时无法识别 iten 的 flex-basis：nowrap （尽管它可能只是一个未定义宽度的对象）。容器不会针对目标进行扩展。

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

参考：

• 柔性集装箱宽度不增加
• 内联柔性水箱（显示：inline-flex）延伸主水箱的整个宽度

案例：

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

IE 10 和 11 BUG：

• flex 无单位 flex-basis 值的简写将被忽略
• flex-basis 与 box-sizing: border-box
不匹配
• flex-basis 不支持calc()
• 使用缩写​​
时，flex-basis中未考虑重要性