Setting a max-width for flex items?
You could use:
.non-flex{
margin-left: 50%;
}
to create more space in between the first 3 elements and the non-flex one
I would apply a width or min-width to the .child items (or left/right padding that creates the distance between them) and margin-left: auto to the last item, which moves it right, independently from the others:
https://jsfiddle.net/6vwny6bz/2/
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
box-sizing: content-box;
}
.child {
list-style: none;
min-width: 80px;
padding: 10px 0;
}
.non-flex {
margin-left: auto;
padding: 10px 0;
}<ul class="container">
<li class="child">One</li>
<li class="child">Three</li>
<li class="child">Three</li>
<div class="non-flex">
I'm not a flex item
</div>
</ul>A simple solution is to set margin-right: auto:
margin-right: auto;