CSS 究竟 flex-basis 属性集是什么？

What exactly flex-basis property sets?

提问by ilyo

Is there a difference between setting max-widthor widthto a flex item instead of the flex-basis?

设置max-width或设置width为弹性项目而不是flex-basis?

Is it the "breaking point" for the flex-grow/shrinkproperties?

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

And when I set flex-wrap: wraphow does the browser decides at which point to move down item to new line? Is it according to their width or 'flex-basis'?

当我设置flex-wrap: wrap浏览器如何决定将项目向下移动到新行时？是根据它们的宽度还是“flex-basis”？

Example: http://jsfiddle.net/wP5UP/The last two boxes have the same flex-basis: 200px, yet onlyone of them moves down when the window is between 300px and 400px. Why?

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

采纳答案by Terry

flex-basisallows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.

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

It is, however, notthe breaking point for flex-grow/shrink properties. The browser determines when to wrap the element on the basis of if the initial sizes of elements exceed the width of the cross-axis (in conventional sense, that is the width).

然而，这并不是挠性增长/收缩特性的突破点。浏览器根据元素的初始大小是否超过横轴的宽度（传统意义上，即宽度）来确定何时包裹元素。

Based on your fiddle, the reason why the last one moves down the window is because the width of the parent has been fully occupied by the previous siblings — and when you allow content to wrap, the elements that fail to fit in the first row gets pushed to the subsequent row. Since flex-growis a non-zero value, it will simply stretch to fill all spaces left in the second row.

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

See demo fiddle (modified from yours).

见演示小提琴（从你的修改）。

If you look at the fiddle, I have modified for the last item to have a new size declaration:

如果您查看小提琴，我已修改最后一项以具有新的尺寸声明：

.size3 {
  flex: 0 1 300px;
}

You will realize that the element measures 300px across as intended. However, when you tweak the flex-grow property such that its value exceeds 0 (see example), it will stretch to fill the row, which is the expected behavior. Since in its new row contextit has no siblings to compare to, an integer between 1 to infinity will not influence it's size.

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

Therefore, flex-growcan be seen as this:

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

• 0: (Default value) Do not stretch. Either size to element's content width, or obey flex-basis.
• 1: Stretch.
• ≥2(integer n): Stretch. Will be ntimes the size of other elements with flex-grow: 1on the same row, for example.

• 0：（默认值）不要拉伸。大小为元素的内容宽度，或服从flex-basis.
• 1:伸展。
• ≥2（整数n）：拉伸。例如，将是同一行上其他元素的大小的n倍flex-grow: 1。

回答by zloctb

Good article https://gedd.ski/post/the-difference-between-width-and-flex-basis/

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

flex-basis is: the size of flex items before they are placed into a flex container. It's the ideal or hypothetical size of the items. But flex-basis is not a guaranteed size! As soon as the browser places the items into their flex container, things change. Often times the flex container won't have enough space, or will have extra space, after all its items' flex-basis values are added up.

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