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>

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

Does this answer your question? [Flexbox not working in Internet Explorer 11](https://stackoverflow.com/questions/37905749/flexbox-not-working-in-internet-explorer-11) — Zak, Jan 21 '21 at 18:11
hi @tacoshy, i've lately realized it so now i want to achieve the samething with flexbox. any idea how can i achieve the same layout showed in image with flex — tony_92, Jan 21 '21 at 18:16

SLDem · Answer 1 · 2021-01-22T08:05:25.910

0

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

edited Jan 22 '21 at 08:05

answered Jan 21 '21 at 21:20

SLDem

2,065
1
8
28

Please explain here _what_ and _why_ you changed. – Roy Jan 22 '21 at 08:09
The question was how to position 5 boxes inside a flex container in a specific way, in my answer I show the code of how to do it, I changed nothing, just gave an example. – SLDem Jan 22 '21 at 08:14
Still, you could explain what each part of it does, so others can learn from. Now it's just a copy and paste answer. – Roy Jan 22 '21 at 08:16
I think its pretty much self explanatory, add a `basis` attribute to the flex item and wrap the main container with `flex-wrap` – SLDem Jan 22 '21 at 08:17
It's clear for *you*, but if someone searches for the same question, ends up here and sees this, it might be that he/she needs more context. The quality of your answer is way higher with explanations. – Roy Jan 22 '21 at 08:32
If someone wants an easy exit they have it here, if they want to know what exactly the attributes do they can easily google them and find out, I don't think its necessary to explain what `flex-wrap` or `flex-basis` does – SLDem Jan 22 '21 at 09:02

score 0 · Answer 2 · answered Oct 10 '22 at 13:50

0

for the flex version, just use

align-content: flex-start;

answered Oct 10 '22 at 13:50

May

1
1

that answer was already given (and in a lot more helpful way!) – jasie Oct 11 '22 at 08:19
@jasie As far as I can tell, this was the first answer to mention `flex-start`, though I agree more explanation would be useful. – DBS Oct 11 '22 at 08:46
@jasie I was looking how to align boxes on stack overflow as well and come across this. I used SLDem solution and got an idea to use flex-start and fixed my problem. just dropping the idea of using flex-start on this solution hoping this will help someone as my first contribution to stackoverflow lol – May Oct 12 '22 at 10:23

score 0 · Answer 3 · answered Oct 11 '22 at 03:51

First, the comments here are single line comments, you should always use multi line comments to comment text in CSS. I removed all comments and then ran your code, it worked properly, because there is no // comments in CSS, there is only one comment style in CSS is /* text */. Adding // comments only breaks the stylesheet. Then your code will work as expected.

Tushar Makawana · Answer 4 · 2022-10-11T08:41:32.120

.grid_container {
      display: flex;
      flex-wrap: wrap;
      column-gap: 20px;
      row-gap: 20px;
     
    }

    .grid_container > .box-item {
        align-content: flex-start;
       
        width: calc(33.33% - 40px);
    }
   .box-item img { 
       width:100%;
    }

@media(max-width:767px){
  .grid_container > .box-item { 
    width:100%; 
  }
}

<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>

flexbox with 5 boxes

4 Answers4