flexbox with 5 boxes

user_15043902 0
Viewed 230

I'm trying to achieve the following layout using flexbox flex

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>

I'm trying to do the same thing in flexbox but i was not able to achieve it: the css code looks as follows:

//the same class using flex property
.grid_container{
    margin: 10px auto;
    max-width: 1100px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
}

//this is with flex
.box-item {
  width: 33%;
  height: auto;
  max-width: 33%; 
  position: relative;
}

//inside image css
.box-item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
  min-height: 200px;
}

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

//trying to add responsiveness
@media only screen and (max-width: 780px) {
.box-item {
  width: 45%;
}
}

flexbox css-grid css html
1 Answers

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%;
}
user_145353090
Related