Flexbox Rows Align Left [duplicate] - html

Question

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 3 years ago.
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

Answer 1

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.

Answer 2

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

Answer 3

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