flex之间有什么区别
有关于这方面的问题和文章，但据我所知，没有任何结论。 我能找到的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/开始大小。 它可以是百分比或绝对值。
......这本身并没有太多说明基于弹性基础的元素的行为。 根据我目前对flexbox的了解，我不明白为什么也无法描述宽度。
我想知道在实践中flex-basis与宽度有什么不同：
编辑/澄清 ：这个问题已经以不同的格式被问到什么是完全基于flex的属性集？ 但我觉得更直接的比较或总结灵活的基础和宽度（或高度）的差异会很好。
考虑flex-direction
在阅读您的问题时首先想到的是， flex-basis并不总是适用于width 。
当flex-direction为row ， flex-basis控制宽度。
但是，当flex-direction是column ， flex-basis控制高度。
主要差异
以下是flex-basis和width / height之间的一些重要区别：
flex-basis仅适用于弹性项目。 Flex容器（不是Flex项目）将忽略flex-basis Flex的容器，但可以使用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项目的内容指示自动调整大小。
注意：此灵活框布局的初始版本中没有此值，因此一些较早的实现将不支持它。 等同的效果可以通过使用能够实现auto与主尺寸（一起width或height的） 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项目收缩 请注意最后的设置。
由于默认允许弹性项目收缩（这可以防止它们溢出容器），因此指定的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速记而不是直接使用它的速记属性来控制灵活性，因为速记正确地重置了任何未指定的组件以适应常见用途。
浏览器错误
影响所有主流浏览器的错误，除了IE 11和Edge：
在嵌套的柔性容器中忽略flex-basis 。 width作品。
在嵌套柔性容器中调整柔性项目大小时发现问题。
当使用flex-basis ，容器会忽略其孩子的尺寸，并且孩子会溢出容器。 但是对于width属性，容器尊重其子项的大小并相应地扩展。 这在IE11和Edge中不是问题。
参考文献：
例子：
使用flex-basis和white-space: nowrap flex项目white-space: nowrap溢出inline-flex容器。 width作品。
看起来，设置为inline-flex的flex容器在使用white-space: nowrap渲染兄弟节点时不会识别flex-basis white-space: nowrap （尽管它可能只是未定义宽度的项目）。 容器不会扩展以容纳物品。
但是，如果使用width属性而不是基于flex-basis的容器，则容器将遵循其子级的大小并进行相应的扩展。 这在IE11和Edge中不是问题。
参考文献：
例：
影响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接管并且它们的值适用。
定义元素的width/height是一个非常好的主意 - 几乎是必不可少的 - 即使您在flex-basis有完全不同的值。 请记住通过禁用display:flex来进行测试display:flex并查看您获得的内容。
上一篇: What are the differences between flex
下一篇: Setting flexbox display with jquery for multiple browsers?