Flexbox：当连续4个不适合时，制作2x2网格

Question

我的<ul>内有四个<li>，每个都有20％的宽度，但最小宽度为200px。现在，每当我调整视口大小以使其连续4行不适合时，它不会在2x2网格中绘制<li>，而是连续放3，而剩下的则放在另一行。

As seen here

当连续4个项目不合适时，我必须使用什么flexbox属性来制作2x2网格？

Answer 1

当视口不能再包含单行中的所有4个项目时，您可以使用媒体查询来调整flex-basis的{​​{1}}。

在codepen上查看此example。