根据原始大小制作flex-grow扩展项目

我有连续3个button，宽度各不相同。 我希望它们的宽度都相同，以填充行的剩余宽度，所以最宽的宽度将比其他宽度宽。

你可以在下面看到我试图用flex做的事情导致所有的button都是相同的宽度。 我知道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项目之间分配容器中的可用空间。

如果没有空闲空间， flex-grow没有任何作用。

如果存在负空间 （即弹性物品的总长度大于容器的长度），则flex-grow不起作用，并且flex-shrink起作用。

---

flex-basis因素

当flex-basis为0 ， flex-grow忽略flex项目中的内容的宽度/高度，并将线上的所有空间视为可用空间。

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

当flex-basis是auto ， 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基本价值

^{其他关键字（用于search）：基于弹性的区别：自动与弹性基础：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>