究竟啥是 flex-basis 属性集？

Posted 2023-03-06

【中文标题】究竟啥是 flex-basis 属性集？

【英文标题】：What exactly flex-basis property sets?究竟什么是 flex-basis 属性集？

【发布时间】：2014-06-27 11:11:16

【问题描述】：

将max-width 或width 设置为弹性项目而不是flex-basis 之间有区别吗？

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

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

示例：http://jsfiddle.net/wP5UP/ 最后两个框具有相同的flex-basis: 200px，但只有其中一个在窗口介于 300 像素和 400 像素之间时向下移动。为什么？

【问题讨论】：

flex-basis vs width / height: ***.com/q/34352140/3597276

【参考方案1】：

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

然而，它不是 flex-grow/shrink 属性的断点。浏览器根据元素的初始尺寸是否超过横轴的宽度（传统意义上的宽度）来决定何时包裹元素。

根据您的小提琴，最后一个向下移动窗口的原因是因为父级的宽度已被先前的兄弟姐妹完全占据 - 当您允许内容换行时，无法容纳的元素第一行被推到下一行。由于flex-grow 是一个非零值，它会简单地拉伸以填充第二行剩余的所有空格。

See demo fiddle (modified from yours).

如果你看小提琴，我已经为最后一项修改了新的尺寸声明：

.size3 
  flex: 0 1 300px;

您将意识到该元素按预期测量了 300 像素。但是，当您调整 flex-grow 属性使其值超过 0 (see example) 时，它将拉伸以填充行，这是预期的行为。由于在其新行上下文中它没有可比较的兄弟姐妹，因此介于 1 到无穷大之间的整数不会影响它的大小。

因此，flex-grow 可以看成这样：

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

【讨论】：

'flex-shrink' 会发生什么？它启动的断点是什么？

flex-shrink 的工作方式与flex-grow 类似：它指示当同一行上的初始/原始宽度之和超过沿横轴的可用空间时元素应缩小多少。将其设置为0 可防止折叠超出其最小宽度（通常受每个元素中的内容限制），而无量纲整数值允许折叠：1 将启用折叠，n 允许您设置每个元素的距离的比率相对于1 折叠。

@Terry（传统意义上）主轴 = 宽度，横轴 = 垂直。

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

@tomekwi 当您设置冲突的width 和flex-basis 时，使用flex-basis。实际上，唯一一次使用width 是当flex-basis 设置为auto，这是默认。将其设置为任何内容，它将适用。另请注意，如果 min-width 和 max-width 受到尊重，并且同一行上的兄弟姐妹会考虑这一点，但有时可能看起来 `flex-shrink|grow" 不能正确应用。

【参考方案2】：

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

flex-basis 是：弹性项目在被放入之前的大小 弹性容器。这是物品的理想或假设尺寸。但 flex-basis 不是保证大小！只要浏览器放置 项目进入他们的弹性容器，事情发生了变化。经常弯曲 毕竟容器不会有足够的空间，或者会有额外的空间 其项目的 flex-basis 值相加。