JSFiddle - React, Tailwind, and code Playground

HTML

<div class="containerClass">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  <div class="block5"></div>
</div>

<div class="containerClass noFlexbox">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
  <div class="block4"></div>
  <div class="block5"></div>
</div>

SCSS

.containerClass {
  display: flex;
  width: 300px;
  flex-wrap: wrap;
  justify-content: center;
  background: #ff0;
 
  
  .block1,
  .block2,
  .block3,
  .block4,
  .block5 {
    margin: 10px calc(50% - 25px);
    width: 50px;
    height: 50px;
    background: #f0f;
  }
  
  .block3 {
    margin-right : 1px;
  }
  .block4 {
    margin-left : 1px;
  }
  
  &.noFlexbox {
    display: inline-block;
    text-align: center;
    background: green;
    
    .block1,
    .block2,
    .block3,
    .block4,
    .block5 {
      margin: 10px auto;
    }
    
    .block3,
    .block4 {
      display: inline-block;
    }
  }
}