我如何設計一個div的樣式，使得大小相等的元素在水平和垂直方向上均勻分布，而不考慮窗口的大小？

例如:假設一個div有6個元素。當窗口尺寸較小時(移動顯示器),它們將是3行2列。當窗口尺寸變得足夠大，可以容納一排3個(可能是ipad顯示屏)，那么它將是2排3個。但是，當窗口大小變得足夠大，可以容納一行4個時(大型顯示器等)，它仍然會保持2行3個，而不是每個元素之間的空間增加。

我發現另一個問題基本上涵蓋了我的問題:flexbox每行的元素數量相等嗎？ 然而，最好的答案是使用jquery。有沒有更簡單的方法只做造型或者？jsx？

單擊此處獲得我下面嘗試的codepen鏈接:

<div class="container-main">
  <div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
  </div>
</div>

.container-main{
  
  display: flex;
  background-color: blue;
  width: 100%;
  height: 500px;
  justify-content: space-evenly;
 
}
.container{

  width: 300px;
  height: 300px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background-color: red;
  align-content: space-evenly;
}

.box{
  width: 70px;
  height: 50px;
    background-color:#333;
    padding:20px;
    border-radius:10px;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-family:sans-serif;
  }

正如您在下圖中看到的，當。容器寬度是300像素和400像素，它均勻地分布在div的整個區域。但是在500px和600px寬度時，它不再均勻分布(2x3)。我如何設計它的樣式，使元素總是均勻地填充整個div，而不管它的寬度是多少？

容器寬度:300像素容器寬度:400像素容器寬度:500像素容器寬度:600像素