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

我有一个<ul>，其中有四个<li>，其中每个都有20％的宽度，但最小宽度为200px。现在，无论何时调整视口的大小，使得连续4行不适合，而不是在2x2网格中绘制<li>，它会将3放在一行中，并将剩余的一行放在另一行中。Flexbox：当连续4排不合适时，制作2x2网格

我有什么Flexbox的财产使用，使一个2x2的网格，只要在一排4项不适合？

提供您的代码，以便我们可以分析 – DPS

尝试将“li”的内部包装到一个附加元素中，以便您可以将“li”本身设置为50％（每行获取两个）并将包装器你想要的最大宽度。 –

如果你想连续使用4'li'，使用'flex-flow：row wrap;'。 – LKG

当视口不再包含单个行上的全部4个项目时，您可以使用媒体查询调整<li>的flex-basis。

在codepen上查看此example。

2017-07-29 09:08:31 Cyrille

我认为Flexbox可能有一个属性来做到这一点，但我想使用媒体查询是最好的选择。谢谢！ –

我不是CSS网格布局的专业人士，但也许它可以让你做到没有媒体查询。 – Cyrille

回答