使用 flex-wrap 在最后一行出現不一致的 flex-grow

Question

請看我非常簡單的 flex 布局示例：

有

• 容器
  • 彈性盒開啟（顯示：彈性）
  • 包裝（彈性包裝：包裝）
• 其中的一些項目有
  • 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 基本大小加上與比率成比例的剩余可用空間的一小部分。

• 如果使用彈性收縮系數

  對於線上的每個未凍結項目，將其彈性收縮系數乘以其內部彈性基本尺寸，並將其記為縮放后的彈性收縮系數。 求該項目的縮放伸縮系數與該行上所有未凍結項目的縮放伸縮系數之和的比率。 將項目的目標主要大小設置為其 flex 基本大小減去與該比率成比例的剩余可用空間絕對值的一小部分。

CSS 工作組意識到了這個問題，並計划在 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>