flex-basis属性设置的是什么？

Question

将flex项目的max-width或width设置与flex-basis相比，是否有区别？

这是flex-grow/shrink属性的“断点”吗？

当我设置flex-wrap: wrap时，浏览器如何决定在哪个点将项目移到新行？是根据它们的宽度还是'flex-basis'？

例子：http://jsfiddle.net/wP5UP/ 最后两个框具有相同的flex-basis: 200px，但仅有其中一个在窗口大小在300px和400px之间时移至下一行。为什么？

- ilyo

---

flex-basis与width/height的区别：https://dev59.com/4FsX5IYBdhLWcg3wALba - Michael Benjamin

Answer 1

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

但是，它不是 flex-grow/shrink 属性的断点。浏览器基于如果元素的初始大小超过交叉轴（在传统意义上即为宽度）的宽度来确定何时换行。

根据您的 fiddle，最后一个元素向下移动的原因是父元素的宽度已被前面的兄弟元素完全占用。当允许内容换行时，无法适应第一行的元素将被推到随后的行。由于 flex-grow 是非零值，因此它将简单地伸展以填满第二行中所有剩余的空间。

查看演示 Fiddle（从您的 Fiddle 修改）。

如果您查看 Fiddle，则已修改最后一个项目的大小声明：

.size3 {
  flex: 0 1 300px;
}

您会发现该元素按预期跨度为300像素。但是，当您调整flex-grow属性的值以使其超过0 (参见示例) 时，它将被拉伸以填充行，这是预期的行为。由于在其新行上下文中没有同级元素可供比较，介于1到无穷大之间的整数不会影响其大小。

因此，可以把flex-grow看作是这样的：

• 0：（默认值）不拉伸。要么根据元素的内容宽度设置大小，要么遵守flex-basis。
• 1： 拉伸。
• ≥2 (整数n)： 拉伸。例如，在与flex-grow: 1的其他元素在同一行上的情况下，其大小将是其他元素大小的n倍。

- Terry

---

“flex-shrink”是什么意思？它触发的断点是什么？ - ilyo

flex-shrink 的工作方式类似于 flex-grow：它决定了当同一行上初始/原始宽度的总和超过交叉轴上可用空间时，元素应该收缩多少。将其设置为 0 可以防止折叠超出其最小宽度（通常由每个元素中的内容限制），而无单位整数值允许折叠：1 将启用折叠，而 n 允许您设置每个元素相对于 1 折叠的比率。 - Terry

@Terry（在传统意义上）主轴=宽度，交叉轴=垂直。 - Vennsoh

@Terry @Vennsoh 当一个元素的width和flex-basis值发生冲突时会发生什么？它们中的一个会影响另一个，还是其中一个会被忽略？哪一个？ - tomekwi

当您设置冲突的 width 和 flex-basis 属性时，将使用 flex-basis。实际上，只有在将 flex-basis 设置为默认值 auto 时才会使用 width。将 flex-basis 设置为任何其他值都将应用该值。还要注意，如果同时遵守 min-width 和 max-width 的要求，并且同一行中的兄弟元素也满足这些要求，则有时可能看起来 flex-shrink|grow 不正确地应用了。 - tao

Answer 2

好的文章：https://gedd.ski/post/the-difference-between-width-and-flex-basis/

flex-basis是：在放置到flex容器中之前，flex项的大小。它是项的理想或假设大小。但是flex-basis不是一个保证的大小！一旦浏览器将项目放入其flex容器中，情况就会发生变化。往往情况下，flex容器没有足够的空间，或者在所有项的flex-basis值被相加之后，会有额外的空间。

- zloctb