center dynamic number of divs using flex

Question

I have 4 divs inside a div and I want those divs to be centered.

I'm using flexbox to achieve that using both

justify-content: center;
flex-wrap : wrap;

Let's say the fourth div will be in a new line, it will be also centered but I want it to be at the beginning of the line.

CodePen: https://codepen.io/loukil98/pen/zYwvPzM?editors=1100

Div 5 is centered but I want to be at the same level as div1.

<html>

<body>
  <div class="mainContainer">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
      <div class="div4">div4</div>
      <div class="div2">div5</div>
 </div>
</body>

</html>

Css

body{
width:100%;
}
.mainContainer{
  width:90%;
  background-color : brown ;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  align-content:flex-start;
}


.div1{
  width:250px;
  height:100px;
  background-color:blue;
  margin:10px;
}
.div2{
  width:250px;
  height:100px;
  background-color:red;
    margin:10px;

}
.div3{
  width:250px;
  height:100px;
  margin:10px;
  background-color:green;
}
.div4{
   width:250px;
  height:100px;
  background-color:purple;
  margin:10px;
}

This might help you: https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items — Christian, Jul 03 '21 at 21:25

score 0 · Answer 1 · answered Jul 03 '21 at 21:33

You might want to use grid for this.

.mainContainer{
  width: 90%;
  background-color: brown;
  padding: 20px;
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: row;
  grid-template-columns: auto auto auto;
  grid-template-rows: 150px 150px 150px;
}

If you remove the fixed size from the containers, this will lay out the divs in the way you wanted

cssyphus · Accepted Answer · 2021-07-03T22:11:02.943

The key is to make your five sub-divs (inside #mainContainer) to be 25% width, not 250px.

Consider: inside the mainContainer, you have the five sub-divs (let's call them the outer divs), which are four-to-a-line (or 25% width) and inside each outer div you have an inner div. (The purpose of the inner div is only to align the contents inside each of the five sub-divs)

You need flex on the mainContainer in order to (a) align the five sub-divs in a line, and (b) to wrap onto the next line (flex-wrap).

Each of those five sub-divs should be 25%, not ___px. That way, the fifth (and 9th, and 13th, etc) will wrap to the next line. Also, your solution will be responsive - which means that as the screen size changes, you'll still get 4-to-a-line. And also, because you are using the .inner div to align the content, the spill-over divs (5th, 9th, 13th, etc) can be left-aligned.

To be clear: you do not need the "inner" div structure that I added to your example. But if you want the contents of the five (or more?) sub-divs to be centered, then create divs inside each sub-div - and make each of those (".inner") divs also flex, and align the contents using justify-content (horizontal) and align-items (vertical).

body{
width:100%;
}
.mainContainer{
  width:90%;
  background-color : brown ;
  display:flex;
  flex-basis:25%;
  flex-wrap:wrap;
}

.outer{
  width:25%;
  height:100px;
}
.inner{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.div1{
  background-color:blue;
}
.div2{
  background-color:red;
}
.div3{
  background-color:green;
}
.div4{
  background-color:purple;
}

<div class="mainContainer">
    <div class="outer div1"><div class="inner">div1</div></div>
    <div class="outer div2"><div class="inner">div2</div></div>
    <div class="outer div3"><div class="inner">div3</div></div>
    <div class="outer div4"><div class="inner">div4</div></div>
    <div class="outer div2"><div class="inner">div5</div></div>
</div>

Update:

I just re-read your question. If you want the 4th div to start on a new line, and at the beginning of the line, the only way I can think to do that is to add yet another wrapping div structure, so that there is a "row" div that contains your ".outer" divs. Your ".outer" divs are width: 25%, so they will not expand to fill the full row. Also, if you have just one inside a .row div, it will begin at the left.

using % can make the div too small for the content so when the screen is small then i prefer to have 2 divs or 3 per line — loukik98, Jul 03 '21 at 22:08
Ah, then perhaps you need to use something like BootStrap where you can specify classes for different screen sizes. — cssyphus, Jul 03 '21 at 22:11
Sure, but how will grid know to adjust for the different screen sizes? With BootStrap you can specify classes for xs/sm/md/lg/xl screen sizes (xtra-small, small, med, lg, xtra-lg) and decide that this div will be 25% width on md/lg/xl screens but 50% on xs or sm screens. But it's your project, use the method that suits you best. — cssyphus, Jul 03 '21 at 22:19

center dynamic number of divs using flex

2 Answers2

Update: