Javascript CSS flex最后一个不完整行项目采用完整行项目的宽度

我正在创建一个flexbox；一个容器有一个

max width

，比如

max width=500px

，子项每个都有

min width:130px

和

flex grow:1

，以填充整个行空间

这是小提琴：

我想要实现的是，最后一行的项目与前面的项目具有相同的宽度。i、 e.：第7项和第8项的项目宽度从1到6相同

我怎样才能做到这一点

更新：

---

欢迎使用JS解决方案

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

但如果需要2个以上的伪元素，则需要另一种技术

.parent{
背景：红色；
最大宽度：500px；
高度：400px；
显示器：flex；
柔性包装：包装；
}
.parent：：之后{
内容：''；
flex:130px1；
利润率：10px；
背景颜色：黄色；
高度：10px；
}
.孩子{
背景：蓝色；
利润率：10px；
flex:130px1；
颜色：#FFFFFF；
文本对齐：居中；
线高：50px；
字体大小：60px；
}

1.
2.
3.
4.
5.
6.
7.
8.

为top伪元素提供与元素相同的属性，但高度非常低

但如果需要2个以上的伪元素，则需要另一种技术

.parent{
背景：红色；
最大宽度：500px；
高度：400px；
显示器：flex；
柔性包装：包装；
}
.parent：：之后{
内容：''；
flex:130px1；
利润率：10px；
背景颜色：黄色；
高度：10px；
}
.孩子{
背景：蓝色；
利润率：10px；
flex:130px1；
颜色：#FFFFFF；
文本对齐：居中；
线高：50px；
字体大小：60px；
}

1.
2.
3.
4.
5.
6.
7.
8.

更新 好吧，我终于明白了为什么老年退休金计划看到的一切都和我不同。我用的是Chrome，OP用的是Firefox。下面是应该与Chrome和Firefox兼容的最新演示

• 主要的更改包括将整个布局包装在flex column容器中
• 删除

  页边距：10px因为具有
  框大小的flexbox无法按预期处理边距或边框

• 使用了过多的最小和最大高度和宽度属性
• 使用

  对齐内容：对齐项目之间的间距：列和行方向上的

  之间的间距，使网格紧凑而灵活

.case{
背景：红色；
显示器：flex；
柔性流：柱包裹；
证明内容：之间的空间；
对齐项目：周围的空格；
保证金：自动0；
最大宽度：500px；
溢出y：自动；
}
.家长{
背景：红色；
高度：99vh；
最小高度：100%；
最大宽度：500px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：项目之间的间距；
flex:01自动；
溢出y：自动；
}
.孩子{
背景：蓝色；
最小宽度：130px；
最小高度：130px；
边框：1%实心透明；
颜色：#FFFFFF；
高度：自动；
文本对齐：居中；
字体大小：60px；
弹性：10%；
利润率：1%；
}
.child：类型的最后一个{
可见性：隐藏；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

更新 好吧，我终于明白了为什么老年退休金计划看到的一切都和我不同。我用的是Chrome，OP用的是Firefox。下面是应该与Chrome和Firefox兼容的最新演示

• 主要的更改包括将整个布局包装在flex column容器中
• 删除

  页边距：10px因为具有
  框大小的flexbox无法按预期处理边距或边框

• 使用了过多的最小和最大高度和宽度属性
• 使用

  对齐内容：对齐项目之间的间距：列和行方向上的

  之间的间距，使网格紧凑而灵活

.case{
背景：红色；
显示器：flex；
柔性流：柱包裹；
证明内容：之间的空间；
对齐项目：周围的空格；
保证金：自动0；
最大宽度：500px；
溢出y：自动；
}
.家长{
背景：红色；
高度：99vh；
最小高度：100%；
最大宽度：500px；
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
对齐项目：项目之间的间距；
flex:01自动；
溢出y：自动；
}
.孩子{
背景：蓝色；
最小宽度：130px；
最小高度：130px；
边框：1%实心透明；
颜色：#FFFFFF；
高度：自动；
文本对齐：居中；
字体大小：60px；
弹性：10%；
利润率：1%；
}
.child：类型的最后一个{
可见性：隐藏；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
 > p>您可能想在列表末尾沿着不可见的Flex条目考虑一些事情。

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child hidden">9</div>  /* new */
    <div class="child hidden">10</div> /* new */
</div>

 
你可能想在列表的末尾考虑一些不可见的柔性项目。
HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child hidden">9</div>  /* new */
    <div class="child hidden">10</div> /* new */
</div>

如果容器具有固定宽度，为什么不为此子容器使用固定宽度？实际上，容器具有
最大宽度
而不是
宽度
，因此它实际上不是固定宽度。为什么要隐藏此细节？这是一个错误。同样，它是
max width
而不是
width
，更新了我的问题。如果容器有固定宽度，为什么不为这个子容器使用固定宽度？实际上，容器有
max width
而不是
width
，所以它实际上不是固定宽度。你为什么隐藏这个细节？这是一个错误。同样，它是
max width
而不是
width
，更新了我的问题。它的重复没有任何区别。看看它的样子：这根本没什么区别。看看它的样子：为什么投票失败？我的答案和迈克尔的一样有效。它怎么有效？结果是：你有没有看我的演示，因为我看到了：@user1181378好的，我知道怎么回事，我在用Chrome，你一定在用Firefox。好啊