如何解释“ flex-grow：0”？ [英] How does `flex-grow:0` get interpreted?

问题描述

我想知道Flexbox模型中的 flex-grow：0 是否意味着

I wonder if flex-grow:0 in the Flexbox model means

• 宽度：0
  或


• 增长= 0
  。

如果表示后者，是否可以说这等于 width：auto 和 display：inline-block ，即显示的宽度与显示所需的宽度一样吗？

If it means the latter, is it save to say that this is equal to width:auto and display:inline-block, i.e. it takes just as much width as needed to display?

推荐答案

flex-grow：0 只是意味着在计算项目大小时不会调整项目的大小以适应flex容器的完整主轴尺寸。

flex-grow:0 simply means that the item won't be resized during item size calculation to accommodate flex container's full main axis size.

规范描述为：

此< number> 组件集 flex-grow 并指定弹性增长因子，该因子决定了当分配正的自由空间时，弹性项目相对于弹性容器中其余弹性项目的增长量d。省略时，它设置为 1 。

This <number> component sets flex-grow longhand and 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. When omitted, it is set to 1.

我强调了主轴大小，因为您应该知道 flex-grow 与flex容器的主轴有关，它可以是宽度或高度，具体取决于 flex-direction 和用户浏览器的书写方向。

I've emphasized main axis size above beacuse you should know that flex-grow is related to main axis of the flex container which can be width or height dimension depending on flex-direction and writing directionality of user browser.

因此，我们不能假设等于您的假设。

Therefore we can't assume being equal to your assumption.

但是，当我们谈论 flex-direction：row 并编写方向性LRTB（从左到右，从上到下）时，它们的工作方式与 width：自动； 。项目确实显示为内联，但是它们仍然无法呈现相同的效果，因为HTML源代码中的每个换行符都没有添加空格，就像我们通常在常规内联元素中看到的那样。

But when we're talking about flex-direction: row and writing directionality LRTB (left to right, top to bottom) then they do work in the similar fashion as width: auto;. Items do appear as inlined, but they still don't render the same because no whitespace is being added for each line break in HTML source as we normally see with usual inline elements.

弹性商品宽度与弹性基础相关联属性而不是增长因素。尽管在定义增长和收缩因子且非零的情况下，flex属性的优先级高于项目的宽度或高度。

Flex item width is associated with flex-basis property rather than grow factor. Although flex properties have precedence over width or height of items when grow and shrink factors are defined and non-zero.

这篇关于如何解释“ flex-grow：0”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！