フレックスボックス：1列に4個が入っていないときに2x2グリッドを作成する

Question

<ul>には<li>が4つあり、それぞれ20％幅ですが、最小幅は200pxです。今度は、ビューポートのサイズを変更して4行に収まらないときは、2x2グリッドに<li>を描画するのではなく、3行を1行残し、別の行に残ります。私は、行の4つの項目が収まらないときは常に2x2のグリッドを作るために使用する必要がどのようなフレキシボックスプロパティ

As seen here

？

Answer 1

<li>のflex-basisを調整するためにメディアクエリを使用すると、ビューポートに1行の4つのアイテムがすべて含まれなくなることがあります。

codepenのexampleを参照してください。