flex-grow 绝对值的含义

Question

据我了解，flex-grow 对 flex-ed 元素的子元素指定剩余的 space 相对于所有子元素的相对比例应该是多少分配给给定的元素。所以这个：

<div style="display: flex;">
    <p style="flex-grow: 1; border: 1px solid purple;">First</p>
    <p style="flex-grow: 2; border: 1px solid gray;">Second</p>
</div>

意味着第二段将占剩余 space 的两倍。

但是如果我改变 flex-grow 的绝对值同时保持它们之间的比例：

<div style="display: flex;">
    <p style="flex-grow: .1; border: 1px solid purple;">First</p>
    <p style="flex-grow: .2; border: 1px solid gray;">Second</p>
</div>

效果不一样。我误会了什么？

Answer 1

下面代码段中的所有比率都是 1:2。

间距，当 flex-grow 的总和低于 1.0 时，会按设计显示，但不会像您期望的那样显示。未指定的内容 flex-basis 也会影响间距分布

据我所知，剩余 space 的分布使用或至少期望使用整数。意思是 flex-grow 值代表剩余 space:

的比例

Next we have to determine how much one flex-grow is

Now that we have the remaining space we need to determine into how many slices we want to cut it. The important thing here is that we don’t divide the remaining space by the number of elements, but by the number of total flex-grow values. So in our case that’s 3 (flex-grow: 2 + flex-grow: 1)

178 / 3 = 59.33

remaining space / total flex-grow values = "one flex-grow"

所以将你的数字代入等式，假设要分配的假设 space 仍然是 178 那么你得到：

178 / .3 = 593.33333

我假设它被扔掉了 window 而你只剩下默认值

const ratio1to2 = [.01, .04, .08, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1, 2, 3, 4, 5, 50];

$(function() {
  ratio1to2.forEach(e => {
    let p2 = (e * 2);
    let html = `<div class="flexcontainer"><div style='flex-grow: ${e}'>${e}</div><div style='flex-grow: ${p2}'>${p2}</div></div>`;
    $("#placeholder1").append(html);
    $("#placeholder2").append(html);
  });
});

div#placeholder1,
div#placeholder2 {
  display: inline-block;
  border: 1px dashed green;
  padding: 4px;
}

.flexcontainer {
  margin-bottom: 4px;
  display: flex;
  width: 250px;
  gap: 4px;
}

.nobasis>.flexcontainer>div {
  border: 1px dashed red;
}

.basis20pct>.flexcontainer>div {
  flex-basis: 20%;
  border: 1px dashed blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="placeholder1" class="nobasis">
  No flex-basis, spacing not as expected
</div>
<div id="placeholder2" class="basis20pct">
  flex-basis 20% spacing more consistent.
</div>

Answer 2

根据 flexbox draft spec:

Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.

An item’s flex-grow value is effectively a request for some proportion of the free space, with 1 meaning “100% of the free space”; then if the items on the line are requesting more than 100% in total, the requests are rebalanced to keep the same ratio but use up exactly 100% of it. However, if the items request less than the full amount (such as three items that are each flex-grow: .25) then they’ll each get exactly what they request (25% of the free space to each, with the final 25% left unfilled). See § 9.7 Resolving Flexible Lengths for the exact details of how free space is distributed.

This pattern is required for continuous behavior as flex-grow approaches zero (which means the item wants none of the free space). Without this, a flex-grow: 1 item would take all of the free space; but so would a flex-grow: 0.1 item, and a flex-grow: 0.01 item, etc., until finally the value is small enough to underflow to zero and the item suddenly takes up none of the free space. With this behavior, the item instead gradually takes less of the free space as flex-grow shrinks below 1, smoothly transitioning to taking none of the free space at zero.

Unless this “partial fill” behavior is specifically what’s desired, authors should stick to values ≥ 1; for example, using 1 and 2 is usually better than using .33 and .67, as they’re more likely to behave as intended if items are added, removed, or line-wrapped.

换句话说：

如果所有flex-grow的总和>=1，所有剩余的space将按比例分配给不同的flex-grow 值。只要比例保持不变，实际值就没有影响（例如 1:5 与 2:10）。
如果总数<1，则剩余space中只有部分将按相同比例分配——即总数所代表的部分。例如，如果所有 flex-grow 值加起来为 .13，则仅分配剩余 space 的 13%。（这可以在中的代码片段中看到）。

想法是 flex-grow: 0（在单个项目上）占据剩余 space 的 none，而 flex-grow: 1（或更大）占据所有它; 0 和 1 之间的值在这两个极端之间逐渐过渡。当多个项目具有 flex-grow 集时，应用相同的逻辑。

因此，在问题的第二个片段中，flexbox 子项目将仅占用 .3 或 30% 的免费 space，而不是全部。

flex-grow 绝对值的含义

Meaning of absolute values of flex-grow

css

flexbox