Flexbox Rows Align Left

Question

I am trying to create a grid using flexbox and I cannot get the last row of items to align left as I am using justify-content: space-between. I have added a JS Fiddle below: https://jsfiddle.net/b5f4jmhu/

The boxes in the last row space between when there aren't 4 boxes to make up a full row. Any suggestions on how to get the last row to align to the left when there aren't enough boxes to fill the row?

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  margin: 60px auto 60px auto;
}

.box {
  flex: 0 0 22%;
  height: 100px;
  background: #222;
  margin: 0 0 20px 0;
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Thanks, Jamie

You can't set different justification/alignment by row, you'd probably have to revert to ```flex-start``` and achieve the effect by controlling the size of the child elements. Not sure what your ultimate layout goal is, but you may want to look into CSS Grid. — Chris B., Jul 30 '19 at 15:54
https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap — Paulie_D, Jul 30 '19 at 16:13

score 1 · Answer 1 · answered Jul 30 '19 at 17:52

With flex you cannot select the last row, but for a known amount of element on each rows, you can count them and reset the right margin on the last item if it needs to.

here it would position 2 and 3 from groups of 4.:last-chld:nth-child(xn) will help you select those two (possibilities).

example:

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 20px 0 20px;
  margin: 60px auto 60px auto;
}

.box {
  flex: 0 0 22%;
  height: 100px;
  background: #222;
  margin: 0 0 20px 0;
}
.box:last-of-type:nth-child(4n - 1) {
  margin-right:calc(22% + 24px);/* size of one element + its margin */
}
.box:last-of-type:nth-child(4n - 2) {
  margin-right:calc(44% + 48px);/* size of two elements + their margin */
}

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

<div class="boxes">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

if grid is a better way to handle this, there, is a solution while using flex.

score 0 · Accepted Answer · answered Jul 30 '19 at 15:54

It's better to use Grids for this purpose. Check please a demo on the Codepen.

.boxes {
  max-width: 600px;
  background: #ccc;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  padding: 20px;
  margin: 60px auto 60px auto;
}

.box {
  height: 100px;
  background: #222;
}

And now it will be perfectly fine =)

score 0 · Answer 3 · answered Jul 30 '19 at 15:57

I've modified your fiddle, take a look:

https://jsfiddle.net/z1kLs492/

.boxes {
  max-width: 600px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
  margin: 60px auto 60px auto;
}

.box {
  width: 23%;
  height: 100px;
  background: #222;
  margin: 1%;
}

.boxes::after {
  content: "";
  flex: auto;
}

Flexbox Rows Align Left

3 Answers3