究竟 flex-basis 属性集是什么? [英] What exactly flex-basis property sets?

问题描述

将 max-width 或 width 设置为 flex item 而不是 flex-basis 有区别吗?

Is there a difference between setting max-width or width to a flex item instead of the flex-basis?

它是 flex-grow/shrink 属性的断点"吗?

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

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

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

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

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

推荐答案

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

flex-basis allows 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-grow/shrink 属性的突破点.浏览器根据元素的初始大小是否超过横轴的宽度(传统意义上的宽度)来决定何时包裹元素.

It is, however, not the 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).

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

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-grow is a non-zero value, it will simply stretch to fill all spaces left in the second row.

查看演示小提琴(从你的修改而来).

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

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

.size3 {
  flex: 0 1 300px;
}

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

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 context it has no siblings to compare to, an integer between 1 to infinity will not influence it's size.

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

Therefore, flex-grow can be seen as this:

• 0:(默认值)不要拉伸.大小为元素的内容宽度，或遵守 flex-basis.
• 1:拉伸.
• ≥2(整数n):拉伸.例如，将是 n 倍与 flex-grow: 1 在同一行上的其他元素的大小.

• 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 n times the size of other elements with flex-grow: 1 on the same row, for example.

这篇关于究竟 flex-basis 属性集是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！