flex-grow什么时候切换到flex-shrink，反之亦然？ [英] When does flex-grow switch to flex-shrink, and vice-versa?

问题描述

我不明白是什么让Flex项目从增长到收缩的行为？起初，我认为这是 flex-basis 值，但是如果只有一个项目有或没有？

<另外，基于 flex-basis 的规格说：

基础CSS属性指定flex基础，它是flex项目的初始主要大小。

这是什么意思？如果我有一个项目，其余的是默认的，为什么它通常开始比值更大一点？在哪里添加的空间来自哪里？

解决方案

基于flex的属性设置flex项目的初始主尺寸，在由其他flex属性分配空闲空间之前 这意味着flex项目首先按其定义的宽度（在 flex-direction：row ）或height（在 flex-direction：column ）。

换句话说，在一个行方向flex容器中，其中 flex-basis：100px 相当于 width：100px ，该项目的宽度为100px。

这就是初始主尺寸。

然后，应用其他的柔性属性。即， flex-grow 和 flex-shrink 。

如果容器的宽度大于100px，那么 flex-grow：1 展开该项目以填充额外空间。

<如果容器小于100像素，那么忽略 flex-grow：1 ，并且 flex-shrink：1 根据弹性尺寸算法缩小物品的尺寸。

<所以，要回答你的问题：

lockquote

什么时候从开始增长到缩小？

blockquote>

假设两个属性都被启用（即它们不是 flex-grow：0 或 flex当$ flex-basis / width / height 对flex项目不再小于或大于容器的长度。

让这个更清楚一点：

• 当总和 flex-basis / width / height on flex项目不再比容器长度多，这意味着没有溢出，并且项目不消耗所有可用空间。 flex-grow 工作。
  

• 当的总和为flex-basis / 宽度 / 高度不再是少比容器的长度长，这意味着有溢出物品必须收缩以适应容器内部。 flex-shrink 可以工作。

spec：






flex-grow





这个[property]指定了flex增长因子，它决定了当Flex的容器中的flex项目相对于flex容器的其余部分增长多少时， 正面的空闲空间 是
的分布式。


$ b

flex-shrink





这个[property]指定了flex收缩因子，它决定了Flex容器相对于flex容器中其余的flex
项目收缩的程度当 负空闲空间 被分配时。



flex-basis 是根据flex因素分配空闲空间的。




_{https://www.w3.org/TR/css-flexbox-1/#flex-property}







I don't understand what makes flex items switch from grow to shrink behavior? At first I thought it is the flex-basis value, but what if only one item has it, or none?

Also, the specs on flex-basis say:

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item.

What does that mean? If I have one item with it, and the rest are default, why is it usually starts a little bigger than the value? Where does the added space come from?

解决方案

The flex-basis property sets the initial main size of the flex item, before free space is distributed by other flex properties.

This means that the flex item is first sized for its defined width (in flex-direction: row) or height (in flex-direction: column).

In other words, in a row-direction flex container, where flex-basis: 100px is equivalent to width: 100px, the item would have a width of 100px.

That's the initial main size.

THEN, other flex properties are applied. Namely, flex-grow and flex-shrink.

If the container is wider than 100px, then flex-grow: 1 expands the item to fill the extra space.

If the container is less than 100px, then flex-grow: 1 is ignored and flex-shrink: 1 reduces the size of the item according to a flex sizing algorithm.

So, to answer your question:

When does flex switch from grow to shrink?

Assuming both properties are enabled (i.e., they are not flex-grow: 0 or flex-shrink: 0), the switch will occur when the sum total of flex-basis / width / height on flex items is no longer less or more than the length of the container.

To make this a bit more clear:

• When the sum total of flex-basis / width / height on flex items is no longer more than the length of the container, this means there is no overflow and the items don't consume all available space. flex-grow works.

• When the sum total of flex-basis / width / height on flex items is no longer less than the length of the container, this means there is overflow and the items must shrink to fit inside the container. flex-shrink works.

From the spec:

flex-grow

This [property] specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

flex-shrink

This [property] specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

flex-basis

This [property] specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

_{https://www.w3.org/TR/css-flexbox-1/#flex-property}

这篇关于flex-grow什么时候切换到flex-shrink，反之亦然？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！