根据原始大小使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

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项中内容的大小，并将行上的所有空间视为自由空间。

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

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

这是相对尺寸。只有额外的空间会被分配。

以下是来自spec的插图：

---

例子:

• flex: 1（绝对尺寸）

这个简写规则可以拆分为：flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

应用于所有 flex 项，这将使它们的长度相等，而不考虑内容。（请注意，在某些情况下，需要覆盖默认的最小尺寸才能实现此效果。）

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

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

• flex: auto（相对尺寸）

这个简写规则同时考虑了内容大小和可用空间，因为它被拆分为：

• flex-grow: 1 表示该项目可以放大，占据剩余空间的比例为1。
• flex-shrink: 1 表示该项目可以缩小，当空间不足时，该项目将缩小，缩小比例为1。
• flex-basis: auto 表示该项目的初始大小为其内容的大小。

更多变化请参见：7.1.1. flex基本值

^{搜索其他关键词：flex-basis auto 0 flex 1 auto之间的区别}

- Michael Benjamin

---

这是一个很好的回答，详细解释了 flex-basis 的行为，以及它如何非常巧妙地解决了这里的问题 - 谢谢！ - davnicwil

在第二张图片中（对于flex-basis为“auto”的情况），那些1 1、1 1、2 2代表什么？我知道它们是flex-grow因子，但它们代表什么？ - Lokesh Sanapalli

它们代表了分配给flex-grow值的自由空间（围绕内容）。这些数字中的每一个都是flex-grow的一个值。因为flex-basis是auto，所以内容长度被考虑在内。@LokeshSanapalli - Michael Benjamin

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

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>

- sol

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;
  ...
}

- Arta