使 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>

原文由 Sam Willis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简答

从 flex: 1 切换到 flex: auto 。

---

解释

flex-grow 属性包含两个关键数据：

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

---

自由空间分布

flex-grow 属性在同一行的弹性项目之间分配容器中的可用空间。

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

如果有 _负的可用空间_（即弹性项目的总长度大于容器的长度），则 flex-grow 无效并且 flex-shrink 发挥作用。

---

flex-basis 因素

当 flex-basis 是 0 ， flex-grow 忽略弹性项目中内容的大小并将行上的所有空间视为可用空间。

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

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

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

这是 规范 中的插图：

---

例子：

• flex: 1 （绝对尺寸）

这个速记规则分解为： flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

应用于所有弹性项目，这将使它们的长度相等，无论内容如何。 （请注意，在 某些情况下，需要覆盖 默认的最小尺寸 才能产生这种效果。）

• flex-grow: 1 （相对尺寸）

此规则本身将考虑内容大小和可用空间，因为 flex-basis 的默认值是 auto 。

• flex: auto （相对尺寸）

这种速记方式会影响内容大小和可用空间，因为它可以分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

这里有更多变化： 7.1.1。 flex

搜索的附加关键字：flex-basis auto 0 flex 1 auto 之间的区别

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不确定这是否完全是您所追求的，但如果您只是设置 flex-grow:1 而不是 flex:1; ，我认为这是您需要的结果：

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

.button {
  flex-grow: 1;
  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>

原文由 Pete 发布，翻译遵循 CC BY-SA 3.0 许可协议