Split multiple flex children left and right - css

Question

I know when using display: flex you can use margin-left: auto on a child and that pushes it all the way to the right but if you do that with multiple children you end up with evenly distributed margins instead of them all sitting to the far left.
Assuming HTML is uneditable
I know you could create a class like so: http://jsfiddle.net/L943ckr5/
.flex {
display: flex;
}
.child {
height: 30px;
width: 50px;
background-color: red;
}
.child:nth-child(even) {
background-color: blue;
}
.end {
margin-left: auto;
}
<div class="flex">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child end"></div>
<div class="child"></div>
<div class="child"></div>
</div>
But is there a way to individually target the last 3 children and 'float' them right but with Flex obviously. Something along the lines of justify-self: flex-end;

Answer 1

In case of you're being OK with using jQuery to tackle this problem, I got solution to wrap every group of 3 child divs into a parent div, and spread them as a column.
This might get helpful if you don't know the exact number of child divs in your markup.
JSFiddle
HTML:
<div class="flex">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
.flex {
display: flex;
justify-content:space-between;
}
.flex-container {
display:flex;
}
.child {
height: 30px;
width: 50px;
background-color: red;
}
.child:nth-child(even) {
background-color: blue;
}
jQuery:
var arr = $(".child"),
templ = '<div class="flex-container"></div>';
for(var i = 0; i < arr.length; i+=3) {
arr.slice(i, i+3).wrapAll(templ);
}

Answer 2

Do you mean like this:
.child:nth-last-child(3) {
margin-left: auto;
}
.flex {
display: flex;
}
.child {
height: 30px;
width: 50px;
background-color: red;
}
.child:nth-child(even) {
background-color: blue;
}
.child:nth-last-child(3) {
margin-left: auto;
}
<div class="flex">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
As far as I know there is no property to add to each of the elements that would achieve the same effect.