0

I am trying to figure out if there is a way to align the last row to the left as oppose to center. In the following JsFiddle you will see that when you resize screen the divs adjust how many show in a row and evenly spaces around them. Except that the last row also does the same thing. Problem is that the last row is an uneven number always and as such I would like the last row to maintain same spacing as the previous rows, just start form the left.

I tried doing this with floats, display inline-block, and flex, but having no luck. Here is my latest attempt:

.wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px auto;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

https://jsfiddle.net/yme1msj7/3/

EDIT:

The answer doesn't have to use flex. I'm open to any suggestions of making this work that does not involve javascript.

Bagzli
  • 6,254
  • 17
  • 80
  • 163

2 Answers2

0

The issue is the margin: [...] auto. The automatic left and right margins are overriding your alignment settings.

.wrapper{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px 0;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
Joseph Marikle
  • 76,418
  • 17
  • 112
  • 129
  • Why does the 0 works? – Bagzli Mar 06 '18 at 23:56
  • I noticed that if you add a 4th div, then the last row has 1 dif on left side and 1 div on right. Both should be on the left. The other problem I saw is that if you have lets say just 2 divs, they are not evenly spaced out, a big gap is left in the middle compared to left and right – Bagzli Mar 07 '18 at 03:13
  • This will only work if there is 1 item in the last row, which I'm sure you actually already know. The dupe link's shows what it takes no matter how many items in the last row. – Asons Mar 08 '18 at 08:24
0

You can add a "last" selector and override the auto value of margin property to avoid default centering only on the last div, keeping it for the others to avoid unwanted behaviour:

.wrapper{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item{
  width: 140px;
  height: 50px;
  background-color: blue;
  margin: 10px auto;
}


div:last-of-type {
 margin: 0px 10px;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

You can use .wrapper:not(:last-child){margin:10 auto;} avoiding to declarate div.last-of-type, etc. See CSS last pseudo selectors for more ways to do the same.

JoelBonetR
  • 1,551
  • 1
  • 15
  • 21
  • 1
    This would not work as when you resize the screen and boxes drop down, it behaves differently. See here for an example: https://jsfiddle.net/yme1msj7/30/ – Bagzli Mar 07 '18 at 15:01
  • If you want it to run nice on resize, delete auto value from margin property, but i don't know if you need this value for something else – JoelBonetR Mar 07 '18 at 15:20
  • or set the margin with a responsive metric. for example, 0.5rem instead of using 10px. but it only works when a div keeps alone at the last row – JoelBonetR Mar 07 '18 at 15:21