`flex-grow:0` 是如何解释的？

Question

不知Flexbox模型中的flex-grow:0是否表示

width:0 或
"grow=0" .

如果是后者，是不是等于width:auto和display:inline-block，即显示需要多少宽度就够了？

Answer 1

flex-grow:0 只是意味着在项目大小计算期间不会调整项目大小以适应 flex 容器的完整 主轴大小 .

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 和用户浏览器的书写方向性。

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

但是当我们谈论 flex-direction: row 并编写方向性 LRTB（从左到右，从上到下）时，它们的工作方式与 width: auto; 类似。项目确实显示为内联，但它们仍然不呈现相同，因为在 HTML 源代码中没有为每个换行符添加空格，正如我们通常在普通内联元素中看到的那样。

`width: 0`怎么样？

Flex 项目宽度与 flex-basis 属性而不是增长因素相关联。尽管当定义了增长和收缩因子且非零时，弹性属性优先于 width 或 height 项目。

Answer 2

几个例子flex-grow: 0

以下示例可能对那些学习 flex-box.

的人有所帮助

基本上，flex-grow 执行以下操作：

检查容器是否比所有容器都宽 children
如果是，将 left-over space 按比例分配给每个 child

flex-grow

所以，如果我们有两个 children，例如flex-grow分别等于：

1 和 1：给两者相同份额的额外 space
1 和 2：给第二个比第一个多 2 倍
0 和 1：给第二个无限多于第一个（1/0 = 无穷大），即根本不生长第一个并生长第二个以填充容器的其余部分
0 和 0：其中 none 个会变大，children 最终会比容器小。所以 0 可以被看作是一个有点神奇的值，简单地意味着“永远不要增长这个”，而不是更严格意义上的比例（因为 0/0 的含义没有明确定义）。

以下代码在 Chromium 85 上的呈现方式如下：

for (let container of document.getElementsByClassName('container')) {
  const widths = [];
  for (let child of container.children) {
    widths.push(child.offsetWidth)
  }
  container.insertAdjacentHTML('afterEnd', `<div>widths: ${widths.join(' ')}</div><br>`)
}

.container {
  display: flex;
  width: 400px;
}
.container .child-1 {
  background-color: red;
  height: 2em;
}
.container .child-2 {
  background-color: blue;
  height: 2em;
}
.container .subchild-1 {
  background-color: green;
}
.container .subchild-2 {
  background-color: yellow;
}

ruler
<div class="container"><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div><div style="width: 50px; background-color: magenta;">50</div><div style="width: 50px; background-color: cyan;">50</div></div>

flex-grow 1 1. Adds 75 (175 = 100 + 75) to child-1 and 75 to child-2 (225 = 150 + 75)
<div class="container">
  <div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div>
  <div class="child-2" style="flex-grow: 1;"><div class="subchild-2" style="width: 150px">150</div></div>
</div>

flex-grow 1 2. child-1 wants 100, child-2 wants 200. We have 100 left to 400. child-2 to grow 2x more than child-1 (33 vs 67).
<div class="container">
  <div class="child-1" style="flex-grow: 1;"><div class="subchild-1" style="width: 100px">100</div></div>
  <div class="child-2" style="flex-grow: 2;"><div class="subchild-2" style="width: 200px">200</div></div>
</div>

flex-grow 0 1. child-1 simply cannot grow, so child-2 takes up all remaining space.
<div class="container">
  <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div>
  <div class="child-2" style="flex-grow: 1"><div class="subchild-2" style="width: 50px">50</div></div>
</div>

flex-grow 0 0. How much is 300 divided by 0? Doesn't matter, if neither can grow we go below the min.
<div class="container">
  <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 50px">50</div></div>
  <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 50px">50</div></div>
</div>

flex-grow 0 0. No more space left, all fits perfectly. flex-grow 0 does nothing.
<div class="container">
  <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 100px">100</div></div>
  <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 300px">300</div></div>
</div>

flex-grow 0 0. Minimal content size doesn't fit, nothing we can do about it.
<div class="container">
  <div class="child-1" style="flex-grow: 0"><div class="subchild-1" style="width: 100px">100</div></div>
  <div class="child-2" style="flex-grow: 0"><div class="subchild-2" style="width: 400px">400</div></div>
</div>

`flex-grow:0` 是如何解释的？

How does `flex-grow:0` get interpreted?

css

flexbox

`width: 0`怎么样？

`flex-grow:0` 是如何解释的？

How does `flex-grow:0` get interpreted?

css

flexbox

width: 0怎么样？

`width: 0`怎么样？