Css 防止柔性包装3:1的情况

对不起，我不知道如何写正确的问题。但我想解决的问题是：

如果容器有4个项目，并且每个项目都有Flex:1-->那么它将按顺序定位项目：1行4个项目-->2行3个项目在第1行，1个大项目在第2行-->2行2个项目-->和4行

有什么方法可以防止“2行，第1行有3个项目，第2行有1个大项目”的情况？（第二个案例）

同样的情况下，一个容器有6个项目，8个项目，。。。等等

下面是一个例子：

---

非常感谢。

我通过这种方式实现了您所需要的。。。 首先，我将flex声明应用于包装图像的div

<div class="wrap">

    <p>picture</p>
    <p>picture</p>
    <p>picture</p>
    <p>picture</p>

</div>

.wrap {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

---

最简单、最优雅的解决方案可能是将每两个项目包装在单独的flex容器中，而不使用

flex-wrap:wrap：


.flex外部{
显示器：flex；
柔性包装：包装；
}
/*这里没有行包装*/
/*只需使用默认的flex wrap:nowrap即可*/
.柔性内件{
显示器：flex；
}
/*只是演示的样式*/
.弹性项目{
宽度：200px；
高度：100px；
背景颜色：橙色；
颜色：白色；
字体大小：3rem；
}

一个
两个
三
四
嗯……你能用油漆或其他东西来模拟你的意思吗？有些人可能会发现您列出的行/项组合……嗯，令人困惑。您好，我添加了一张照片作为问题的示例。：）啊，这有助于澄清一些细节——你能提供一段代码来重现这种情况吗？如果问题的解决方案中包含a，则提出解决方案要容易得多。在父div上选择flex-wrap:wrap，在子div上选择flex:1时，总是会出现这种情况。
.wrap p {
    flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
}