html - flexbox with 5 boxes

Question

I'm trying to achieve the following layout using flexbox

I've tried this in grid it's working as expected. but it's not working in IE. so i thought of switching to flexbox so below are my versions of both grid and flex.

grid code is as follows:

 //this is with grid css
.grid_container {
  width: 65%;
  margin: 10px auto;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1100px;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;             
  -ms-grid-row-gap:1.5rem;
  -ms-grid-column-gap:1.5rem;
}
//this is using grid css
.box-item {
  width: 100%;
  height: auto;
  position: relative;
  }
 
//inside image css
.box-item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.box-text {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
}

<div class="grid_container">
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
</div>

question from:https://stackoverflow.com/questions/65833305/flexbox-with-5-boxes

Answer 1

For your main container:

.main-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

Then your item:

.item {
    flex-basis: 30%;
}