Css flex basis属性集究竟是什么？

将

max width

或

width

设置为弹性项目而不是

flex basis

之间是否存在差异

它是

flex增长/收缩

属性的“断点”吗

当我设置

flex wrap:wrap

时，浏览器如何决定在哪一点将项目下移到新行？是根据它们的宽度还是“弹性基础”

例如：

---

最后两个框具有相同的伸缩基础：200px，但是当窗口在300px和400px之间时，只有一个框向下移动。为什么？

flex basis

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

但是，它不是flex生长/收缩特性的断点。浏览器根据图元的初始尺寸是否超过横轴的宽度（在传统意义上，即宽度）来确定何时包裹图元

根据您的小提琴，最后一个向下移动窗口的原因是因为父级的宽度已被上一个同级完全占用，并且当您允许内容换行时，无法放入第一行的元素将被推送到下一行。由于

flex grow

是一个非零值，因此它将简单地拉伸以填充第二行中剩余的所有空间

如果你看小提琴，我已经修改了最后一个项目，以有一个新的大小声明：

.size3 {
  flex: 0 1 300px;
}

您将认识到，该元素的测量值为300px。但是，当您调整flex grow属性使其值超过0（）时，它将拉伸以填充行，这是预期的行为。因为在新行上下文中，它没有可比较的同级，所以1到无穷大之间的整数不会影响它的大小

因此，

flex-grow

可以看作：

• 0

  ：（默认值）不拉伸。根据元素的内容宽度调整大小，或遵循

  flex-basis

• 1

  ：拉伸

• ≥2

  （整数n）：拉伸。例如，将是同一行上具有

  flex grow:1

  的其他元素大小的n倍
  好文章
  弹性基础是：弹性项目在放入一个容器之前的大小 柔性容器。这是物品的理想尺寸或假设尺寸。但是 弹性基础不是保证尺寸！一旦浏览器将 项目放入flex容器后，情况会发生变化。经常是弹性的倍 容器将没有足够的空间，或者毕竟会有额外的空间 将其项目的弹性基准值相加

  ---

  “弹性收缩”会发生什么？它的断点是什么？

  flex-shrink

  的工作原理类似于

  flex-grow

  ：它指示当同一行上的初始/原始宽度之和超过横轴上的可用空间时，元素应该收缩多少。将其设置为

  0

  可防止折叠超出其最小宽度（通常受每个元素中的内容限制），而无量纲整数值允许折叠：

  1

  将启用折叠，

  n

  允许您设置每个元素相对于

  1

  折叠的距离的比率（传统意义上）主轴=宽度，横轴=垂直。@Terry@Vennsoh当一个元素具有冲突的

  宽度
  和
  弹性基础
  值时会发生什么情况？它们中的一个会影响另一个，还是忽略了一个？哪一个？当您设置冲突的
  宽度
  和
  弹性基础
  时，会使用
  弹性基础
  e唯一使用
  width
  的时间是当
  flex basis
  设置为
  auto
  时，这是默认值。将其设置为任意值，它将应用。还要注意，如果
  min width
  和
  max width
  得到尊重，同一行上的同级会对其进行解释，但有时可能看起来像“flex shrink”| grow“不正确应用。
  弹性基础
  与
  宽度
  /
  高度
  ：