Align divs in the American Flag star pattern? - html

Question

I'm making a section of the website where there are 3 centered items on the top row and two centered items on the bottom row. I want them aligned like the stars on the American flag.
body {
background-color: #eee;
}
/* ----------------------------- FLIP CIRCLES ----------------------------- */
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.flip-container,
.flipping-front,
.flipping-back {
width: 300px;
height: 300px;
display: inline-block;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.flipping-front,
.flipping-back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.flipping-front {
z-index: 2;
transform: rotateY(0deg);
/* for firefox 31 */
}
/* back, initially hidden pane */
.flipping-back {
transform: rotateY(180deg);
}
.flipper img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
<!-- START FLIP BLOCK -->
<div style="margin: auto; display: flex">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin: auto">
<div class="flipper">
<div class="flipping-front">
<!-- front content -->
<img src="img/flip/front.jpg" width="300" />
</div>
<div class="flipping-back">
<!-- back content -->
<img src="img/flip/back.png" width="300" />
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin: auto">
<div class="flipper">
<div class="flipping-front">
<!-- front content -->
<img src="img/flip/front.jpg" width="300" />
</div>
<div class="flipping-back">
<!-- back content -->
<img src="img/flip/back.png" width="300" />
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin: auto">
<div class="flipper">
<div class="flipping-front">
<!-- front content -->
<img src="img/flip/front.jpg" width="300" />
</div>
<div class="flipping-back">
<!-- back content -->
<img src="img/flip/back.png" width="300" />
</div>
</div>
</div>
</div>
<!-- START FLIP BLOCK: ROW 2 -->
<div style="margin: auto; display: flex">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin: auto">
<div class="flipper">
<div class="flipping-front">
<!-- front content -->
<img src="img/flip/front.jpg" width="300" />
</div>
<div class="flipping-back">
<!-- back content -->
<img src="img/flip/back.png" width="300" />
</div>
</div>
</div>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');" style="margin: auto">
<div class="flipper">
<div class="flipping-front">
<!-- front content -->
<img src="img/flip/front.jpg" width="300" />
</div>
<div class="flipping-back">
<!-- back content -->
<img src="img/flip/back.png" width="300" />
</div>
</div>
</div>
</div>