Set space-between between flex list items [duplicate] - html

Question

This question already has answers here:
How can I align one item right with flexbox?
(5 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I've got a navigation which looks sort like a this one under, and li items inside are flex items. This menu is rendered from the outside, and I'm not able to wrap any of the items inside the dedicated container.
What I'm trying to achieve is to set space-between between the last item and the other ones on the left. I've tried to do it with a margin-left on the last child, but it's not a nicest solution.
Is there a CSS option to "wrap" the last item somehow, so there's always space between that one and the ones on the left?
.container {
max-width: 1000px;
background-color: lightblue;
}
ul {
display: flex;
justify-content: space-between;
}
.last {
background: red;
}
<div class="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li class="last">Last Item</li>
</ul>
</div>

Answer 1

Using margin-left on the last element is a good solution. However, you can improve your implementation by using the :last-child selector:
ul li:last-child {
margin-left: 10px;
}
Instead of manually assigning the last class to the last child.
EDIT: If you mean you want your last child to be aligned all the way to the right. You can separate them into different lists, and use justify-content: space-between:
.container {
max-width: 1000px;
background-color: lightblue;
display: flex;
justify-content: space-between;
}
ul {
display: flex;
}
ul li {
width: 3rem;
}
.right li {
background-color: red;
}
<div class="container">
<ul class="left">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul class="right">
<li>Item</li>
</ul>
</div>