最后一行与 flex-wrap 不一致的 flex-grow答案

【问题标题】：Inconsistent flex-grow in last row with flex-wrap最后一行与 flex-wrap 不一致的 flex-grow
【发布时间】：2016-07-21 07:59:09
【问题描述】：

请看我非常简单的 flex 布局示例：

有

容器与
- 打开弹性框（显示：弹性）
- 换行（flex-wrap: 换行）
其中的一些项目有
- flex-grow 设置为 1 = 所有项目都将同等缩放
- flex-shrink 为 0 = 任何项目都不会按比例缩小
- flex-basis = 所有项目的基本宽度相同

尽管有所有规则集，但最后一行的项目有不同的宽度？当 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>

【问题讨论】：

把1 0 4rem改成1 0 auto怎么样？
嗯，我需要有相同宽度的项目。如果我将其设置为自动，则内部内容会有所不同。
0 0 4rem 呢？这个问题有点混乱。
更接近，几乎在那里，项目是平等的。但我想填补右边的空白。 i.imgur.com/MUJlU6i.png
这在 flexbox 中是不可能的……这不是 line box 模型的工作方式。

标签： html css flexbox flex-grow

【解决方案1】：

flex grow 和shrink 因子基本用于Resolve Flexible Lengths。但这对于每条柔性线（行或列）都是独立发生的。

要解决柔性线内中项目的灵活长度：[...]

如果使用弹性增长因子

求项目的弹性增长因子与线上所有未冻结项目的弹性增长因子总和的比率。设置项目的目标主尺寸与其弹性基本尺寸加上一小部分剩余可用空间与比例成正比。

如果使用弹性收缩系数

对于行上的每个未冻结项目，将其 flex 收缩系数乘以其内部 flex 基本大小，并将其记为它的缩放 flex 收缩系数。查找项目的缩放 flex 收缩因子的比率上所有未冻结项目的缩放弯曲收缩因子的总和线。将项目的目标主尺寸设置为其弹性基本尺寸减去剩余可用空间绝对值的一小部分与比率成正比。

CSS 工作组已经意识到这个问题，plans to introduce some way to fix it in Flexbox Level 2

解决“当你弯曲时最后一行的项目太大” 问题。更一般地说，“使项目具有一致的弯曲尺寸，不管每行有多少额外空间”。

可能的解决方案 - 用最后一项的“幻影副本”填写最后一行，将它们折叠起来，然后删除它们。

可能的解决方案 - 计算 1fr 的最小值和整个 flexbox（而不是每行）的对齐可用空间并使用那个。

【讨论】：

@pravdomil 你是说 Flexbox Level 2 吗？还没写完。
我的意思是使用弹性增长/收缩因子
@pravdomil 啊，那你已经在使用它们了，flex: 1 0 4rem 将弹性增长因子设置为 1，将弹性收缩因子设置为 0。
抱歉，我现在知道了。

【解决方案2】：

添加css很容易，就像：

.flexlast::after{ //here use after add a element
    content: "  ";
    flex: 100;    //100 just big enough, maybe 50 is ok too.
}

flex {
  display: flex;
  flex-wrap: wrap;
}
item {
  flex: 1 0 4rem;
  height: 4rem;
  margin: 0.5rem;
  border: 1px solid lightblue;
}
flex::after{
    content: "  ";
    flex: 100;     
}

<flex>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
  <item></item>
</flex>

【讨论】：