Css 使flex根据其原始大小扩展项目

我有3个按钮在一行，所有的宽度不同。我希望它们都获得相同的宽度，以填充行的剩余宽度，因此最宽的将仍然比其他宽度更宽，以此类推

您可以在下面看到，我尝试使用flex所做的工作导致所有按钮的宽度相同。我知道

flex-grow

可以用来按比例增长每个项目，但我无法计算如何让它们都相对于原始尺寸增长

您可以在第二行中看到，蓝色项目比其他两个项目大。我只是希望这三个都从当前的大小扩展到相同的大小，以填充这一行

谢谢

.row flex{
宽度：100%；
显示器：flex；
弯曲方向：行；
}
.按钮{
弹性：1；
显示：内联块；
填充：10px；
颜色：#fff；
文本对齐：居中；
}
.按钮--1{
背景：红色
}
.按钮--2{
背景：绿色；
}
.按钮--3{
背景：蓝色；
}

使用属性可以设置比例：

。按钮{
显示：内联块；
填充：10px；
颜色：#fff；
文本对齐：居中；
}
.行{
显示器：flex；
}
.按钮--1{
背景：红色；
flex:1自动；
}
.按钮--2{
背景：绿色；
flex:2-1自动；
}
.按钮--3{
背景：蓝色；
flex:3-1自动；
}

使用属性可以设置比例：

。按钮{
显示：内联块；
填充：10px；
颜色：#fff；
文本对齐：居中；
}
.行{
显示器：flex；
}
.按钮--1{
背景：红色；
flex:1自动；
}
.按钮--2{
背景：绿色；
flex:2-1自动；
}
.按钮--3{
背景：蓝色；
flex:3-1自动；
}

不确定这是否完全是您想要的，但是如果您只是设置

flex-grow:1

而不是

flex:1，我认为这是您要求的结果：


.row flex{
宽度：100%；
显示：内联flex；
弯曲方向：行；
}
.按钮{
柔性生长：1；
填充：10px；
颜色：#fff；
文本对齐：居中；
}
.按钮--1{
背景：红色
}
.按钮--2{
背景：绿色；
}
.按钮--3{
背景：蓝色；
}
不确定这是否完全是您想要的，但是如果您只是设置
flex-grow:1
而不是
flex:1，我认为这是您要求的结果：


.row flex{
宽度：100%；
显示：内联flex；
弯曲方向：行；
}
.按钮{
柔性生长：1；
填充：10px；
颜色：#fff；
文本对齐：居中；
}
.按钮--1{
背景：红色
}
.按钮--2{
背景：绿色；
}
.按钮--3{
背景：蓝色；
}

简短回答
您只需从
flex:1
切换到
flex:auto


解释
flex grow
属性因子包含在两个关键数据块中：

正在使用的行/列中的可用空间
flex basis
属性的值

自由空间的分布

flex grow
属性将容器中的可用空间分配给同一行中的flex项

如果没有可用空间，
flex-grow
将无效

如果存在负自由空间（即flex项目的总长度大于容器的长度），则
flex grow
无效，并且
flex shrink
起作用


弹性基础
系数

当
flex-basis
为
0
时，
flex-grow
忽略flex项中内容的大小，并将行中的所有空间视为可用空间

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

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

这是相对大小。线路上只分配额外的空间

以下是来自以下方面的说明：



示例：


flex:1
（绝对尺寸）

此速记规则细分为：
flex-grow:1
/
flex-shrink:1
/
flex-basis:0

应用于所有flex项目，这将使其长度相等，而不考虑内容。（请注意，在中，要发生此效果，必须覆盖。）

flex-grow:1
（相对大小）

此规则本身将考虑内容大小和可用空间，因为

flex:auto
（相对大小）

这种速记方式考虑了内容大小和可用空间，因为它分为：


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


更多变化如下：

搜索的其他关键字：flex basis auto 0 flex 1 auto之间的差异
您只需从
flex:1
切换到
flex:auto


解释
flex grow
属性因子包含在两个关键数据块中：

正在使用的行/列中的可用空间
flex basis
属性的值

自由空间的分布

flex grow
属性将容器中的可用空间分配给同一行中的flex项

如果没有可用空间，
flex-grow
将无效

如果存在负自由空间（即flex项目的总长度大于容器的长度），则
flex grow
无效，并且
flex shrink
起作用


弹性基础

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

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

.button {
  flex: auto;
  ...
}

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

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