弹性基础和宽度之间有什么区别？
有关于这方面的问题和文章，但据我所知，没有任何结论。 我能find的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。 它可以是百分比或绝对值。
…这本身并没有太多的关于柔性基础设置元素的行为。 用我目前对flexbox的知识，我不明白为什么不能描述宽度 。
我想知道如何在实践中完全不同于宽度的 flex-basis ：
- 如果我用flex来代替宽度 （反之亦然），那么视觉上会有什么变化呢？
- 如果我同时设置不同的值，会发生什么？ 如果他们有相同的价值会发生什么？
- 是否有一些特殊的情况下使用宽度或弹性基础会有显着的差异，使用另一个？
- 在与其他Flexbox风格（例如flex-wrap ， flex-grow和flex-shrink）结合使用时， 宽度和flex基础有何不同？
- 任何其他重大差异？
编辑/澄清 ：这个问题已经被问到一个不同的格式什么完全弹性基础属性集？ 但是我觉得对flex-basis和width （或者height ）差异的更直接的比较或者总结会更好。
考虑flex-direction
在阅读你的问题时首先想到的是flex-basis并不总是适用于width 。
当flex-direction为row ， flex-basis控制宽度。
但是，当flex-direction是column ， flex-basis控制高度。
主要差异
以下是flex-basis和width / height之间的一些重要区别：
-
flex-basis只适用于弹性项目。 Flex容器（也不是Flex项目）将忽略flex-basisFlex的容器，但可以使用width和height。 -
flex-basis仅适用于主轴。 例如，如果您在flex-direction: column，则width属性将用于水平调整Flex项目的大小。 -
flex-basis对绝对定位的flex项目没有影响。width和height属性将是必要的。 绝对定位的柔性项目不参与柔性布局 。 -
通过使用
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的影响可能是微乎其微的，或根本就没有。 更多来自规格：
auto在Flex项目上指定时，
auto关键字将检索main size属性的值作为使用的flex-basis。 如果该值本身是auto，则使用的值是content。
content根据Flex项目的内容指示自动resize。
注意：这个值在Flexible Box Layout的初始版本中是不存在的，因此一些较老的实现将不支持它。 通过使用
auto和auto的主要尺寸（width或height）一起使用可以实现相当的效果。
因此，根据规范， flex-basis和width解决方法是一致的，除非flex-basis是auto或content 。 在这种情况下， flex-basis可能会使用内容宽度（据推测width属性也会使用）。
flex-shrink因子
记住flex容器的初始设置很重要。 其中一些设置包括：
-
flex-direction: row– flex项目将水平alignment -
justify-content: flex-start– flex项目将堆叠在主轴线上的起始位置 -
align-items: stretch– flex项目将展开以覆盖容器的交叉大小 -
flex-wrap: nowrap– flex项目被强制保留在一行中 -
flex-shrink: 1– 允许Flex项目缩小
注意最后的设置。
因为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; }
或者，根据规范推荐：
flex: 0 0 100px; /* don't grow, don't shrink, stay fixed at 100px */
7.2。 灵活性的组成部分
鼓励作者直接使用
flex速记而不是直接使用它的速记属性来控制灵活性，因为速记可以正确地重置任何未指定的组件以适应常见的用途 。
浏览器错误
影响所有主stream浏览器的错误，除了IE 11和Edge：
在嵌套的柔性容器中忽略flex-basis 。 width作品。
在嵌套柔性容器中调整柔性项目大小时发现问题。
当使用flex-basis ，容器会忽略孩子的尺寸，孩子们会溢出容器。 但是对于width属性，容器尊重其子项的大小并相应地扩展。 这在IE11和Edge中不是问题。
参考文献：
- 根据儿童的内容，Chrome不扩展灵活父项
- 宽度和弹性基础之间的区别
- 在对嵌套的柔性容器进行尺寸调整时，Flex基础将被忽略。
- flex-basis：100px做一些不同于宽度：100px + flex-basis：auto
例子：
- https://jsfiddle.net/t419zhra/ （来源： @Dremora ）
- https://jsfiddle.net/voc9grx6/ （来源： Chromium Bugs ）
- https://jsfiddle.net/qjpat9zk/ （来源： Chromium Bugs ）
使用flex-basis和white-space: nowrap来flex项目white-space: nowrap溢出inline-flex容器。 width作品。
看起来，设置为inline-flex的flex容器在使用white-space: nowrap渲染兄弟节点时不会识别flex-basis white-space: nowrap （尽pipe它可能只是未定义宽度的项目）。 容器不会扩大以容纳物品。
但是，当使用width属性而不是flex-basis ，容器将尊重其子项的大小并相应地展开。 这在IE11和Edge中不是问题。
参考文献：
- 内联柔性容器宽度不增长
- 内联柔性容器（display：inline-flex）正在扩展父容器的整个宽度
例：
- https://jsfiddle.net/p18h0jxt/1/ （从上面的第一篇文章）
影响IE 10和11的错误：
- 以无单位
flex-basis值的flex速记声明被忽略 -
flex-basis不考虑box-sizing: border-box -
flex-basis不支持calc() - 在使用
flex速记时，重要性在flex-basis被忽略
除了Michael_B的精彩总结之外，值得重申一下：
flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。 它可以是百分比或绝对值。
这里的重要部分是最初的 。
就其本身而言，这确实解决了宽度/高度， 直到其他柔性增长/收缩属性发挥作用。
所以。 一个小孩
.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呢？ 在这种情况下， width/height接pipe并且它们的值适用。
定义元素的width/height是一个非常好的主意 – 几乎是必不可less的 – 即使您对flex-basis有完全不同的值。 请记住通过禁用display:flex进行testingdisplay:flex并查看所获得的结果。
