如何将所有的 div 方块放在同一行？答案

【问题标题】：How to put all the div squares on the same line?如何将所有的 div 方块放在同一行？
【发布时间】：2022-11-25 01:54:13
【问题描述】：

我试图水平放置所有这些方形 div，但是当我在父 div 上设置 display:inline-block 时，所有内容都缩小并折叠成一个颗粒。如果我使用flex，我觉得我需要根据我的需要调整flex 属性。有没有简单的方法来解决它？（我希望它们始终均匀地占据两行，中间有间隙以响应不断变化的视口宽度）

.square {
  position: relative;
  margin: 0;
  max-width: 60px;
  border: 1px dotted black;
  border-radius: 4px;
}
.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.square .content {
  position: absolute;
  width: 100%;
  height: 100%;
}

<div class="number-of-round">
    <div class="square">
      <div class="content flex flex-center">1</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">2</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">3</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">4</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">5</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">6</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">7</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">8</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">9</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">10</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">11</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">12</div>
    </div>
  </div>

【问题讨论】：

标签： html css

【解决方案1】：

.square {
width:10vw;
max-width:60px;
  
  
  margin-bottom:3vw;
  border: 1px dotted black;
  border-radius: 4px;
  
}
.number-of-round{
display:flex;
justify-content: space-between;}

<div class="number-of-round">
    <div class="square">
      <div class="content flex flex-center">1</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">2</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">3</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">4</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">5</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">6</div>
    </div>
  </div>
  <div class="number-of-round">
    <div class="square">
      <div class="content flex flex-center">7</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">8</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">9</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">10</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">11</div>
    </div>
    <div class="square">
      <div class="content flex flex-center">12</div>
    </div>
  </div>

【讨论】：