在flex的最后一行增长
请看我非常简单的flex布局示例:
有
尽管所有的规则集,最后一行的项目有不同的宽度? 当flex-grow说所有的项目都会被平等地缩放时,这怎么可能?
从http://www.w3schools.com/cssref/css3_pr_flex-grow.asp引用:
flex-grow属性指定项目相对于同一容器内的其他柔性项目的增长量 。
这很酷,但我最后一排的物品增长了一点点,其他人。 有任何想法吗?
flex {
display: flex;
flex-wrap: wrap;
}
item {
flex: 1 0 4rem;
height: 4rem;
margin: 0.5rem;
border: 1px solid lightblue;
}
<flex>
<item></item>
<item></item>
<item></item>
<item></item>
<item></item>
<item></item>
<item></item>
<item></item>
</flex>
柔性增长和收缩因素基本上用于解决柔性长度。 但是,这对每个弯曲线(行或列)都是独立发生的。
为了解决柔线中物品的柔性长度:[...]
如果使用flex增长系数
找到该项目的弹性增长因子与该线上所有解冻项目的弹性增长因子之和的比率。 将项目的目标主尺寸设置为其弹性基础尺寸加上与比例成比例的剩余可用空间的一部分。
如果使用弯曲收缩系数
对于线上的每个解冻项目,将其挠性收缩因子乘以其内部挠性基础尺寸,并将其记为缩放挠性收缩因子。 找到该项目的缩放弹性收缩因子与该线上所有解冻项目的缩放弹性收缩因子之和的比率。 将项目的目标主尺寸设置为其柔性基础尺寸减去与该比例成比例的剩余可用空间绝对值的一部分。
CSS工作组意识到这个问题,并计划引入一些方法在Flexbox Level 2中修复它
解决“最后一行中的项目在发现问题时变得太大”的问题。 更一般地说,“不管每条线上有多少额外的空间,使项目具有一致的弯曲尺寸”。