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

问题描述

我不明白是什么让 flex 项目从增长行为转变为缩小行为?一开始我以为是 flex-basis 的值，但是如果只有一个项目有它，或者没有呢?

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?

另外，flex-basis 的规范说:

flex-basis CSS 属性指定了 flex 基础，即 flex 项的初始主要大小.

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?

推荐答案

flex-basis 属性设置了弹性项目的初始主尺寸，之前可用空间由其他 flex 属性分配.

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

这意味着首先根据定义的宽度(在 flex-direction: row 中)或高度(在 flex-direction: column 中)调整 flex 项目的大小.

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

换句话说，在行方向 flex 容器中，其中 flex-basis: 100px 等价于 width: 100px，项目的宽度为 100px.

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.

这是初始的主要尺寸.

然后，应用其他 flex 属性.即，flex-grow 和 flex-shrink.

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

如果容器的宽度超过 100px，则 flex-grow: 1 扩展项目以填充额外的空间.

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

如果容器小于100px，则flex-grow:1被忽略，flex-shrink:1根据弹性大小调整算法.

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.

所以，回答你的问题:

flex 什么时候从增长到缩小?

When does flex switch from grow to shrink?

假设这两个属性都启用了(即它们不是flex-grow: 0 或 flex-shrink: 0)，当总和flex-basis/width/height 在弹性项目上不再小于或大于容器的长度.

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:

• 当弹性项目的flex-basis/width/height的总和不再more 比容器的长度，这意味着没有溢出并且项目不会消耗所有可用空间.flex-grow 有效.

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

当弹性项目的flex-basis/width/height 的总和不再less 比容器的长度，这意味着有溢出，项目必须缩小以适应容器内.flex-shrink 有效.

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.

来自规范:

这个 [property] 指定了 flex 增长因子，它决定了 flex 项目相对于其余部分的增长程度当可用空间为正数时，弹性容器中的弹性项目分布式.

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.

这个 [property] 指定了 flex 收缩因子，它决定了 flex item 相对于 flex 的其余部分将收缩多少分配负可用空间时弹性容器中的项目.

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.

这个[property]指定了flex item的初始主尺寸，在根据弹性系数分配可用空间之前.

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屋！