根据原始大小制作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-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 flex-basis：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>

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