在flex的最后一行增长

请看我非常简单的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>

    柔性增长和收缩因素基本上用于解决柔性长度。 但是,这对每个弯曲线(行或列)都是独立发生的。

    为了解决柔线中物品的柔性长度:[...]

  • 如果使用flex增长系数

    找到该项目的弹性增长因子与该线上所有解冻项目的弹性增长因子之和的比率。 将项目的目标主尺寸设置为其弹性基础尺寸加上与比例成比例的剩余可用空间的一部分。

  • 如果使用弯曲收缩系数

    对于线上的每个解冻项目,将其挠性收缩因子乘以其内部挠性基础尺寸,并将其记为缩放挠性收缩因子。 找到该项目的缩放弹性收缩因子与该线上所有解冻项目的缩放弹性收缩因子之和的比率。 将项目的目标主尺寸设置为其柔性基础尺寸减去与该比例成比例的剩余可用空间绝对值的一部分。

  • CSS工作组意识到这个问题,并计划引入一些方法在Flexbox Level 2中修复它

    解决“最后一行中的项目在发现问题时变得太大”的问题。 更一般地说,“不管每条线上有多少额外的空间,使项目具有一致的弯曲尺寸”。

  • 可能的解决方案 - 用最后一个项目的“幻影副本”填写最后一行,并与他们一起弯曲,然后移除它们。
  • 可能的解决方案 - 计算整个flexbox(而不是每行)的1fr和对齐可用空间的最小值并使用它。
  • 链接地址: http://www.djcxy.com/p/75697.html

    上一篇: grow in last row with flex

    下一篇: wrap not working as expected in Safari