<div id="f6container">
   <div class="box box1">1
   </div>
   <div class="box box2">2
   </div>
   <div class="box box3">3
   </div>
   <div class="box box4">4
   </div>
   <div class="box box5">5
   </div>
   <div class="box box6">6
   </div>
 </div>

In style element (<style>) within head element:

#f6container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  background-color: linen;
  border: thin solid black;
}
.box1, .box2, .box3, .box4, .box5, .box6 {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 28%;
  box-sizing: border-box;
  margin: 1rem 0;
}
.box1 { background-color: lightpink;}
.box2 { background-color: lightsteelblue;}
.box3 { background-color: wheat;}
.box4 { background-color: plum;}
.box5 { background-color: palegreen;}
.box6 { background-color: turquoise;}
.box {
  padding: 2em;
  border: medium solid black;
}