css - 使 flex-grow 扩展元素基于其原始大小

Question

我有 3 个连续的按钮，它们的宽度各不相同。我希望它们都获得相同的宽度以填充行的剩余宽度，因此最宽的仍然会比其他宽度等。

您可以在下面看到我尝试用 flex 做的事情导致所有按钮的宽度相同。我知道 flex-grow 可用于按比例增长每个元素，但我无法弄清楚如何让它们都相对于它们的原始大小增长。

您可以在第二行看到蓝色项比其他两个大。我只希望所有三个都从当前大小平均扩展以填充该行。

谢谢

.row-flex {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.button {
  flex: 1;
  display: inline-block;
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

<div class="row-flex">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

<br/>

<div class="row">
  <a href="#" class="button button--1">Single</a>
  <a href="#" class="button button--2">Larger title</a>
  <a href="#" class="button button--3">Another really large title</a>
</div>

Answer 1

简答

从 flex: 1 切换到 flex: auto。

---

解释

两个关键数据中的 flex-grow 属性因素:

1. 正在使用的行/列中的可用空间。
2. flex-basis 属性的值。

---

可用空间分布

flex-grow 属性将容器中的可用空间分配给同一行中的 flex 元素。

如果没有可用空间，flex-grow 无效。

如果存在负自由空间(即 flex 元素的总长度大于容器的长度)，则flex-grow 无效并且flex-shrink 开始发挥作用。

---

flex-basis 因素

当 flex-basis 为 0 时，flex-grow 忽略 flex items 中内容的大小并处理行上的所有空间作为自由空间。

这是绝对尺寸。线上的所有空间都是分布式的。

当flex-basis为auto时，首先扣除flex items中内容的大小，以确定每个item中的空闲空间。 flex-grow 然后在元素之间分配可用空间(基于每个元素的 flex-grow 值)。

这是相对大小。仅分配行上的额外空间。

这是来自 spec 的插图:

---

例子:

• flex: 1(绝对大小)

这个简写规则分解为:flex-grow: 1/flex-shrink: 1/flex-basis: 0

应用于所有 flex 元素，这将使它们的长度相等，无论内容如何。 (请注意，在 some cases 中，需要覆盖 default minimum sizing 才能产生这种效果。)

• flex-grow: 1(相对大小)

此规则本身将同时考虑内容大小和可用空间，因为 the default value for flex-basis is auto .

• flex: auto(相对大小)

这种简写方式同时考虑了内容大小和可用空间，因为它分解为:

• flex 增长:1
• flex-shrink: 1
• flex 基础:自动

这里有更多变化:7.1.1. Basic Values of flex

^{搜索的附加关键字:flex-basis auto 0 flex 1 auto 之间的区别}