Question

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

有

容器用
- 弹性盒打开（显示：flex）
- 包装（flex-wrap：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>

Answer 1

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

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



如果使用flex grow factor

找出物品的弹性增长因子与线上所有未冻结物品的弹性增长因子之和的比率。设置   item的目标主要大小为其flex基本大小加上一小部分   与比率成比例的剩余自由空间。



如果使用弹性收缩系数

对于中的每个未冻结项目，将其flex缩减系数乘以其内部flex基本大小，并将其视为其缩放的flex   收缩因子。找到项目的缩放弹性收缩因子的比率   所有未冻结物品的缩放弹性收缩因子之和   这条线。将项目的目标主要大小设置为其弹性基础大小减去   剩余可用空间的绝对值的一小部分   与比率成正比。

CSS工作组了解此问题并plans to introduce some way to fix it in Flexbox Level 2


解决“当你弯曲时，最后一行上的物品太大了”   问题。更一般地说，“使物品具有一致的弯曲尺寸，   无论每条线上有多少额外空间“。


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

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

Answer 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>

使用flex-wrap在最后一行中进行不一致的flex-grow

2 个答案: