你可以在下面看到我尝试用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>
解决方法
您需要做的就是从flex:1切换到flex:auto.
说明
flex-grow属性考虑两个关键数据:
>正在使用它的行/列中的可用空间.
> flex-basis属性的值.
自由空间的分布
flex-grow属性在同一行中的flex项目之间分配容器中的可用空间.
如果没有可用空间,则flex-grow不起作用.
如果存在负自由空间(即,柔性物品的总长度大于容器的长度),则柔性生长没有效果并且挠曲收缩发挥作用.
弹性基础因子
当flex-basis为0时,flex-grow将忽略flex项中内容的宽度/高度,并将该行上的所有空间视为可用空间.
这是绝对的尺寸.线上的所有空间都是分布式的.
当flex-basis为auto时,flex会增加flex项中内容大小的第一个因子.然后,它在项目之间分配可用空间,从而使每个项目根据其内容的长度按比例增长.
这是相对大小调整.仅分配线上的额外空间.
这是spec的插图:
例子:
> flex:1(绝对尺寸)
这个简写规则分解为:flex-grow:1 / flex-shrink:1 / flex-basis:0
适用于所有弹性项目,无论内容如何,这将使它们长度相等.
> 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之间的差异