Pushing a single flexbox item to the flexbox-end and wrapping

When using CSS flexbox, I have this tendency to use margin: auto whenever I want to push single item to the flex-end.

For example (assuming ltr mode here and for the rest of this note), inside display:flex; flex-direction: column I would put margin-left: auto on the last item, to make it stick to the right edge, while keeping rest of them to the left.

Fine, you can do that, but it's probably not what you want, if you also need to flex-wrap: wrap your container. Because then, if your row does wrap, you will get second row, with single item, pushed to the right edge, leaving all this whitespace on the left of the otherwise empty row.

I mean, you could want it, but in, say, typical example of navigation menu, where - as the view port becomes smaller - you want to transition from a single row towards vertically stacked items, that is rather not a desired effect. What looked good on a single row, now makes not much sense.

For now my cure of choice for such situations is justify-content: space-between on container. For a single row it works as margin-left: auto while not breaking on wrap.

Alas this works only when we have exactly two items. Which can be enforced by additional wrapping of two groups: one with n-1 items and one with single n-th item.

But I feel and hope that there is a better way somehow.