使 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-grow 无效。

如果有负的可用空间（即弹性项目的总长度大于容器的长度），那么flex-grow 无效，flex-shrink 起作用。

---

flex-basis 因素

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

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

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

这是相对尺寸。仅分配行上的额外空间。

这是来自spec的插图：

---

示例：

• flex: 1（绝对大小）

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

应用于所有弹性项目，这将使它们的长度相等，而不管内容如何。 （请注意，在 some cases 中，需要覆盖 default minimum sizing 才能产生此效果。）

• flex-grow: 1（相对大小）

这条规则本身会考虑内容大小和可用空间，因为the default value for flex-basis is auto。

• flex: auto（相对大小）

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

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

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

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

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>

Answer 3

使用flex 属性可以设置比例：

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

.row {
  display: flex;
}

.button--1 {
  background: red;
  flex: 1 1 auto;
}

.button--2 {
  background: green;
  flex: 2 1 auto;
}

.button--3 {
  background: blue;
  flex: 3 1 auto;
}

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

带有（希望是有用的、解释性的）替代方案的简约答案：

HTML：

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

CSS：

.row-flex {
  display: flex;
}

.button {
  flex-grow: 1; /* make the item grow proportionally to its original size */
                /* default value is 0, the item does not grow */
                /* a meaningful default for flexbox items positioning with */
                /* justify-content: <value>; */      
  padding: 10px;
  color: #fff;
  text-align: center;
}

.button--1 {
  background: red
}

.button--2 {
  background: green;
}

.button--3 {
  background: blue;
}

以下 CSS 声明也有效，因为它们所做的只是将默认的 flex-grow: 0; 覆盖为（对于所需的行为）flex-grow: 1;：

.button {
  flex: auto;
  ...
}

这是以下的简写：

.button {
  flex: 1 1 auto;    
  ...
}

这是以下的简写：

.button {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  ...
}