Css 如何制作包装好的flexbox'；中国的内容增长是否平等？

在启用换行的flexbox中，

flex grow

属性的行为与我所希望的不完全一样：增长是由行决定的。这里有两个示例，一个没有

flex-grow

，一个有

flex-grow

：

.container{
边框：点状1px绿色；
显示器：flex；
柔性包装：包装；
宽度：400px；
}
.container>div{
背景色：红色；
高度：100px；
宽度：100px；
利润率：10px；
}
.container.grow>div{
柔性生长：1；
}

---

通过创建宽度与实际内容相同但高度为零的填充项，使其在最后一个内容行之后不可见，似乎可以实现这一点。必须创建足够的填充项才能完全填充最后一个内容行，但创建超出要求的填充项是无害的。我创建了与内容项一样多的填充项

这变得有点棘手，因为如果容器足够大，这些填充项可能会出现在第一行。使用另一层

div

元素，并给它们20%的最小宽度（基于五个内容框），在这种情况下，强制它们位于第二行

动画演示（无论如何，在Chrome和Firefox中）：

.container{
边框：点状1px绿色；
显示器：flex；
柔性包装：包装；
动画：调整10秒线性无限大；
}
@关键帧调整大小{
0%，100%{宽度：120px；}
50%{宽度：1000px；}
}
.container>div{
弹性：10自动；
最小宽度：20%；
}
.货柜物品{
背景色：红色；
高度：100px；
最小宽度：100px；
利润率：10px；
}
.集装箱填充剂{
最小宽度：100px；
利润率：0.10px；
}

您是如何定义真实页面中元素的宽度的？使用百分比还是希望内容决定实际宽度？@NicoO内容应决定最小宽度，从而决定包装。实际宽度可能（通常情况下）大于最小宽度。因此，基本上，您希望所有flex项都具有第一个flex项的未知宽度，根据其内容，宽度可能为1%到100%？@NicoO排序，但由于

flex grow

的原因，1%应该永远不可能。使用我这里的五列，如果包装给我一行，我希望每个项目的宽度为20%。如果我有两行，我希望每个项目都有一个33 1/3%的值，即使第二行没有填充。如果我有三行，我希望每个项目的宽度为50%。如果我有五行，我希望每个项目的宽度为100%。换句话说，我希望flex-grow增加项目，但我希望它们在整个容器中平均增长，而不是一行一行地增长。嘿，这很难看，但是的，这至少应该有效，谢谢。不过，我希望得到比这更好的答案。：）很好的解决方法和演示。但是我想得越多，我就得出结论，这并不是你在问题中所描述的。更多信息：如何使弹性项在多行中具有相同的宽度。因为第一个孩子的宽度与问题的解决方案无关。您所需要的只是一个由相等项组成的网格。我认为这个问题有一个更简单的解决办法，我会考虑。@Nico我对它不太满意，这就是为什么我还没有接受我自己的答案。：）在我的问题中，我写道“我希望所有子div元素都具有与第一个容器中相同的宽度，但仍然允许该宽度扩展以填充容器。”这不正是我在这里所做的吗？我确保所有子div项都具有相同的宽度，并且仍然允许该宽度扩展以填充容器。对不起，如果我没有正确地理解这个问题。如果您有更好/更简单的解决方案，我非常希望看到！老实说，这让我现在快发疯了；）这必须是可能的。你真的不需要道歉，因为我没有正确理解这个问题。当我偶然发现一个解决方案时，我一定会把它贴出来。