根据原始大小制作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值).

这是相对大小调整.仅分配线上的额外空间.

以下是规范中的插图:

例子:

• flex: 1 (绝对尺寸)

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

  应用于所有弹性项目,无论内容如何,​​这将使它们长度相等.(请注意,在某些情况下,必须覆盖默认的最小大小才能发生此效果.)

• flex-grow: 1 (相对尺寸)

  此规则本身将考虑内容大小和可用空间,因为is 的默认值flex-basisauto.

• flex: auto (相对尺寸)

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

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

更多变化:7.1.1.的基本价值观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>