CSS flex最后一个不完整的行项占用完整行项的宽度

我正在创建一个flexbox; 容器具有max-width ，例如max-width = 500px ，子项目每个都具有min-width: 130px和flex-grow: 1以填充整个行空间。

这是小提琴： https ： //jsfiddle.net/7wroxkhj/6/

我想要实现的是，对于最后一行项目采用相同宽度的前面项目。 即：项目＃7和项目＃8具有从1到6的相同宽度的项目。

我怎样才能做到这一点？

更新：

欢迎JS解决方案！

Answer 1

您可能需要考虑列表末尾隐藏弹性项目的内容。

HTML

 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 /* new */ 
10
 /* new */  

CSS

 .hidden { visibility: hidden; height: 0; font-size: 0; margin: 0 10px; } 

DEMO

Answer 2

给予伪元素顶部与赋予元素相同的属性，但高度非常低。

但是如果需要超过2个伪元素，则需要另一种技术

 .parent { background: red; max-width: 500px; height: 400px; display: flex; flex-wrap: wrap; } .parent::after { content: ''; flex: 130px 1; margin: 10px; background-color: yellow; height: 10px; } .child { background: blue; margin: 10px; flex: 130px 1; color: #FFFFFF; text-align: center; line-height: 50px; font-size: 60px; } 

 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
  

Answer 3

UPDATE

好吧，我终于弄明白为什么OP看到的一切都和我一样。 我使用Chrome和OP使用的是Firefox。 以下是应与Chrome和Firefox兼容的最新演示。

• 主要更改包括将整个布局包装在flex-column容器中。
• 删除margins: 10px; 因为带有box-sizing flexbox不能按预期处理边距或边框。
• 使用了过多的最小和最大高度和宽度属性。
• 使用了justify-content: space-between和align-items: space-between在列和行方向align-items: space-between这使得网格变得紧凑而灵活。

https://jsfiddle.net/zer00ne/fkczpggy/

 .case { background: red; display: flex; flex-flow: column wrap; justify-content: space-between; align-items: space-around; margin: auto 0; max-width: 500px; overflow-y: auto; } .parent { background: red; height: 99vh; min-height: 100%; max-width: 500px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: space-between; flex: 0 1 auto; overflow-y: auto; } .child { background: blue; min-width: 130px; min-height: 130px; border: 1% solid transparent; color: #FFFFFF; height: auto; text-align: center; font-size: 60px; flex: 1 0 10%; margin: 1%; } .child:last-of-type { visibility: hidden; } 

  
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9