last row of flex div not starting from the left

Question

I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned. I am trying to achieve this.

see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.

this is my code

 <div class="wrapper">
      <div id="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
      </div>
      <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
      <div id="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
      </div>
      <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
      <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
    </div>

.wrapper {
  background: #ff0000;
  text-align: center;
  width: 90%;
  height: auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0 5% 0;
  justify-content: center;
}

#squares {
  background: #00ff00;
  width: 30%;
  height: 100px;
  margin: 10px;
}

#squares img {
  max-height: 300px;
  width: 100%;
}

#squares h5 {
  margin: 20px 0;
}

here's the link to my jfiddle for a clearer picture. https://jsfiddle.net/9ros2v4j/6/

Thanks to anyone that can explain.

ksav · Accepted Answer · 2020-06-18T03:05:46.703

.wrapper {
  background: green;
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.wrapper-inner {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}

.square {
  flex: 0 1 33.33%;
}

.square img {
  width: 100%;
  display: block;
}

.square-inner {
  padding: 5px;
}

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="square">
      <div class="square-inner">
        <a href="#"><img src="http://placekitten.com/200/200" /></a>
      </div>
    </div>
    <div class="square">
      <div class="square-inner">
        <a href="#"><img src="http://placekitten.com/200/200" /></a>
      </div>
    </div>
    <div class="square">
      <div class="square-inner">
        <a href="#"><img src="http://placekitten.com/200/200" /></a>
      </div>
    </div>
    <div class="square">
      <div class="square-inner">
        <a href="#"><img src="http://placekitten.com/200/200" /></a>
      </div>
    </div>
    <div class="square">
      <div class="square-inner">
        <a href="#"><img src="http://placekitten.com/200/200" /></a>
      </div>
    </div>
  </div>
</div>

Nice workaround. That seems to be the solution to that problem. — Jakub A Suplicki, Jun 21 '20 at 08:52

Jakub A Suplicki · Answer 2 · 2020-06-23T23:02:08.643

You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.

If you open the below example on a full page, you will be able to see the expected result.

Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.

.wrapper {
  position: relative;
  text-align: center;
  height: auto;
  background: #ff0000;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  
}
.squares {
  background: #00ff00;
  width: 30%;
  height: 100px;
  flex: 0 31.33%;
  margin: 1%;
}

#squares img {
  max-height: 300px;
  width: 100%;
}

#squares h5 {
  margin: 20px 0;
}

<div class="wrapper">
      <div class="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
      </div>
      <div class="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
      <div class="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"/></a>
      </div>
      <div class="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
      <div class="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"/></a>
      </div>
</div>

The divs don't center align in the red one, they are left aligned, I also need them to be centered. — Adoga Patricia, Jun 18 '20 at 02:27
I edited the answer. Please have a look. I also added some notes in order to clarify a few things. I hope it helps you out. — Jakub A Suplicki, Jun 18 '20 at 03:10

Sapinder Singh · Answer 3 · 2020-06-18T02:48:30.263

1

One requirement is for justify-content: flex-start which would place your last row as per your need.

The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.

Or

If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.

edited Jun 18 '20 at 02:48

answered Jun 18 '20 at 02:32

Sapinder Singh

559
6
21

It doesn't work but maybe I can use the padding idea. – Adoga Patricia Jun 18 '20 at 02:44
Actually we don't need `display: contents`. I edited the answer – Sapinder Singh Jun 18 '20 at 02:49

last row of flex div not starting from the left

3 Answers3