什么是flex-basis属性设置？ [英] What exactly flex-basis property sets?

问题描述

将 max-width 或宽度设置为flex项而不是 flex-basis ？

是 flex-grow / shrink 属性？

当我设置 flex-wrap：wrap 在什么时候将项目移动到新行？是否根据其宽度或弹性基础？

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

解决方案

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

但是，Flex-grow / shrink属性的断点是不。浏览器基于元素的初始大小是否超过横轴的宽度（在常规意义上，即宽度）来确定何时包裹该元素。

根据你的小提琴，最后一个向下移动窗口的原因是因为父节点的宽度已经被前面的兄弟姐妹完全占满 - 当你允许内容包裹时，行被推送到后续行。由于 flex-grow 是一个非零值，它将简单地伸展以填充第二行中剩下的所有空格。

请参阅demo fiddle（已修改自您的）。

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

  .size3 { 
 flex：0 1 300px; 
} 
  

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

flex-grow 可以视为：

• 0 ：不要伸展。大小到元素的内容宽度，或者遵守 flex-basis 。


• 1 ：（默认值）。 伸展。


• ≥2。 / code>（整数 n ）： Stretch 。将乘以 flex-grow：1 在同一行上的其他元素的大小。





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

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

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'?

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 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.

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).

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.

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

Therefore, flex-grow can be seen as this:

• 0: Do not stretch. Either size to element's content width, or obey flex-basis.
• 1: (Default value). Stretch. Will be the same size to all other flex items on the same row since they have a default value of 1.
• ≥2 (integer n): Stretch. Will be n times the size of other elements with flex-grow: 1 on the same row.

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