Divs的响应设计

Question

我有以下HTML代码（.CONTAINER内的DIV数量可能会有所不同）。
我想给它们一个最小的宽度，但否则它们应该填充屏幕的整个宽度。当屏幕的宽度太小（对于响应式设计）时，Divs应该简单地进入新线路。
看起来很简单，但是我一直在用梁，弯曲甚至漂浮的头敲打头，但似乎没有什么可用。没有人可以在不使用媒体查询的情况下提供帮助吗？

<div class="container">
    <div>pippo</div>
    <div>pluto</div>
    <div>paperino</div>
    <div>topolino</div>
</div>

Answer 1

使用flex-wrap：wrap;当没有DIV空间时，DIV包裹到下一行。

我也使用Jusify-content：space-betew;填充屏幕的整个宽度

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div class="container">
  <div>pippo</div>
  <div>pluto</div>
  <div>paperino</div>
  <div>topolino</div>
</div>