CSS-flex-basis属性到底设置了什么?

flex-basis: 200pxwidth设置为弹性项目,而不是将flex-basis设置为有区别吗?

flex-basis: 200px属性的“转折点”吗?

而当我设置flex-basis: 200px时,浏览器如何确定在哪一点将项目下移到新行? 是根据他们的宽度还是“弹性基础”?

示例:[http://jsfiddle.net/wP5UP/]最后两个框具有相同的flex-basis: 200px,但是当窗口在300px和400px之间时,只有其中一个向下移动。 为什么?

ilyo asked 2020-08-08T16:16:03Z
2个解决方案
42 votes

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

但是,它不是弯曲增长/收缩特性的起点。 浏览器根据元素的初始大小是否超过横轴的宽度(常规意义上为宽度)来确定何时包装元素。

根据您的小提琴,最后一个移到窗口下方的原因是,父级的宽度已被先前的同级完全占据,并且当您允许内容换行时,无法放入第一行的元素将变为 推送到下一行。 由于≥2是非零值,因此它将简单地拉伸以填充第二行中剩余的所有空间。

请参阅演示小提琴(从您的小提琴修改而来)。

如果您看小提琴,我已经修改了最后一项以具有新的尺寸声明:

.size3 {
  flex: 0 1 300px;
}

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

因此,≥2可以看成是这样的:

  • ≥2 :(默认值)不要拉伸。 大小应等于元素的内容宽度,或者服从flex-grow: 1
  • ≥2:拉伸。
  • ≥2(整数n):拉伸。 例如,将是同一行上其他元素的大小的n倍,其中flex-grow: 1
Terry answered 2020-08-08T16:16:49Z
1 votes

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

flex-basis是:弹性项目在放入项目之前的大小 伸缩容器。 这是商品的理想尺寸或假设尺寸。 但 flex-basis不能保证尺寸! 浏览器将 将项目放入其伸缩容器中,情况就会发生变化。 通常是flex 毕竟,容器将没有足够的空间,或者将有额外的空间 其项目的flex-basis值相加。

zloctb answered 2020-08-08T16:17:16Z
translate from https://stackoverflow.com:/questions/23569229/what-exactly-flex-basis-property-sets