How to override flexbox justify-content: space-between? - html

Question

Is it possible to override space-between so that the last item would horizontally align to the next to last? Or should I just drop space-between and go with flex-start and custom margins?
JSfiddle Demo
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
width: 300px;
margin: 30px auto;
padding: 0;
box-sizing: border-box;
position: relative;
}
.item {
width: 90px;
height: 90px;
background-color: #111;
margin-bottom: 10px;
}
.next-to-last {
background-color: blue;
}
.last-item {
background-color: red;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item next-to-last"></div>
<div class="item last-item"></div>
</div>

Answer 1

Fake element method:
You can add a fake element for the 4th item so that 5 and 6 are next to each other.
This will work if you use visibility: hidden to hide the element and preserve the space occupied by it. The common alternative display: none will not work since the item is not calculated in the flexbox alignment.
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
width: 300px;
margin: 30px auto;
padding: 0;
box-sizing: border-box;
position: relative;
}
.item {
width: 90px;
height: 90px;
background-color: #111;
margin-bottom: 10px;
}
.next-to-last {
background-color: blue;
}
.last-item {
background-color: red;
}
.invisible {
visibility: hidden;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item invisible"></div> <!-- Invisible fake element -->
<div class="item next-to-last"></div>
<div class="item last-item"></div>
</div>
Custom margin method:
If you don't want to create an additional element then you need to use your own suggestion of flex-start and custom margin.
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
width: 300px;
margin: 30px auto;
padding: 0;
box-sizing: border-box;
position: relative;
}
.item {
width: 90px;
height: 90px;
background-color: #111;
margin-bottom: 10px;
margin-right: 10px;
}
.next-to-last {
background-color: blue;
margin-left: 100px;
}
.last-item {
background-color: red;
}
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item next-to-last"></div>
<div class="item last-item"></div>
</div>