Flex: how to right align an item which centers on wrap - html

Question

I'd like to left align two items, and right align one when there is sufficient space but center on wrap.
On first wrap (too thin for right item to fit)
Right item should go to next line and be centered
Remainder remains left aligned
On Second Wrap (too thin for right + mid item to fit)
All three items are vertically stacked and centered
Tried having two layers of flex using justify-content: first with space-between, second with center.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.subcontainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
border: 1px solid black;
height: 100px;
}
<div class="container">
<div class="subcontainer">
<div class="item">abc abc abc abc abc abc</div>
<div class="item">def def def def def def</div>
</div>
<div class="item">right right right</div>
</div>
http://jsfiddle.net/b3z18rLn/9/
Unfortunately, the right item does not center upon wrapping, and remains left aligned.

Answer 1

JSFiddle
You can wrap your third item inside another Flexbox container and use media queries:
/* flex-wrap will put right-subcontainer on a new row when you
decrease the viewport's width.*/
.container {
display: flex;
flex-wrap: wrap;
}
/* flex-grow of 1 will enable this container to take up the
entire row when the left and right subcontainers are
row by row.
flex-wrap is used to allow the second item to go onto a
new row at smaller widths. */
.left-subcontainer {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
}
/* Again, flex-wrap is used to give the right subcontainer
the ability to take up the entire row.
flex-end changes the items from positioning left-to-right
to right-to-left.*/
.right-subcontainer {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
.item {
border: 1px solid black;
width: 300px;
height: 300px;
}
/* You will need to adjust the arguments for these media queries.
Also, if you do decide to use media queries for this approach,
I would suggest reversing the CSS logic by having the CSS
selectors tackle mobile design first and use media queries
to tackle design at larger screen sizes. */
/* The first wrap/breakpoint is at this width. I am telling the
right container to be center-aligned at the first breakpoint. */
#media only screen and (max-width: 925px) {
.right-subcontainer {
justify-content: center;
}
}
/* Then, I tell the left container to be center-aligned at the second
breakpoint. */
#media only screen and (max-width: 1320px) {
.left-subcontainer {
justify-content: center;
}
}
<div class="container">
<div class="left-subcontainer">
<div class="item">abc abc abc abc abc abc</div>
<div class="item">def def def def def def</div>
</div>
<div class="right-subcontainer">
<div class="item">right right right</div>
</div>
</div>