<div class="container"> 
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
</div>

<div class="container_2"> 
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
  <div class="box box_1"></div> 
  <div class="box box_2"></div> 
  <div class="box box_3"></div>
</div>
.container {
  width: 500px;
  height: 100%;
  background-color: rgb(0, 70, 113);
  display: flex;
}

.container .box {
  width: 100px;
  height: 100px;
}

.container .box_1 {
  background-color: red;
}

.container .box_2 {
  background-color: yellow;
}

.container .box_3 {
  background-color: green;
}

/* 第二行 */

.container_2 {
  margin-top: 50px;
  width: 500px;
  height: 100%;
  background-color: rgb(0, 70, 113);
  display: flex;
  flex-wrap: wrap;
}

.container_2 .box {
  width: 100px;
  height: 100px;
}

.container_2 .box_1 {
  background-color: red;
}

.container_2 .box_2 {
  background-color: yellow;
}

.container_2 .box_3 {
  background-color: green;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.