Jquery CSS flex设计与flex wrap

我有一个flex

包含一些元素（我事先不知道确切的数字）

1.
2.
3.
4.
5.
6.
.集装箱{
显示器：flex；
柔性包装：包装；
}

假设我期望有3到15个孩子，他们的宽度最小，但可以扩展到2倍来填满剩余的空间（这里有一把小提琴：）

使用

flex wrap:wrap我可以在需要时让它们以新行的形式流动。通常情况下，结果很好看，例如，在这个例子中，有3和3个元素


但总宽度不同，结果就很奇怪


有没有办法让浏览器平均分割div？

例：在上述情况下，我预计每行3个元素，第一行有5个元素，第二行只有1个元素。在
内部
添加
弹性基础：33.33%
，并删除
内部
的
最小宽度
和
最大宽度
，我想这解决了您的问题-请参阅下面的演示：


div.container{
边框：2倍纯色灰色；
显示器：flex；
柔性包装：包装；
}
内分区{
弹性基准：33.33%；
高度：120px；
填充：自动；
保证金：自动；
}

1.
2.
3.
4.
5.
6.
Hi，如果展开到整页，则此操作无效，因为已设置属性
max width
。我相信他在寻找其他东西，而不是固定的
弹性基础
。它只在某些情况下解决了问题，如果您扩展容器，行上的元素数量仍然可以是5-1、6-2等等on@Ricky_Ruiz感谢您指出
最大宽度
，修复了它。。。让我们问问OP现在的结果是否如预期的那样…@kukkuz谢谢你的努力，但是内容有一个固定的大小（我不能删除的最小值），但我也不想增长到最小值的2倍。在您的示例中，宽度可以变大，但不能变大work@Naigel因此，您希望保持
minwidth
和
maxwidth
以及每行3个元素分布其余的空白，是吗？最大宽度似乎有问题。最小宽度可以是弹性基础。据我所知，flex将无法在子行或子列中均匀划分。如果这是您真正关心的问题，那么可能需要Javascript。您可以在这里看到弹性基础（或最小宽度）是一个断裂point@GCyrillus感谢您的提示，删除max width是不可能的（我不能因为内容的类型而让div占用太多的宽度）。可悲的是，编程方式可能是唯一可行的：（更新了fiddle（flex:1 0 120px；）关于flex-shrink:0；的内容，以模拟符合flex-basis值的最小宽度。好运气的人可以使用它
<div class="container">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
}