使用用作分隔符的空</li> <li>在flex <li>元素之间添加空格是否不正确？

Question

如下面的代码所示，我希望徽标位于最左侧，登录和签名链接位于最右侧，所有其他链接位于中间。

我通过将空的<li>与具有.space并用作分隔符的flex: 1;类一起放置来实现此目的。坦白说，它的工作方式就像我想要的那样，但是，这似乎很野蛮，我想知道是否可以使用CSS或flex所提供的功能。

*, *:after, *:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
a {
    color: #f1f1f1;
}
html {
    font-size: 16px;
}
body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    width: 100%;
}
.navigation {
    background-color: #171717;
}
.navigation-ul {
    display: flex;
    align-items: center;
}
.navigation-ul>li:not(.dropdown) {
    padding: 2px 13px 1px 13px;
    font-weight: 500;
    text-align: center;
    font-size: 1em;
    color: white;
    background-color: #151719;
    list-style-type: none;
}
.logo img {
  width: 60px;
  height: 54px;
}
.space {
    flex: 1;
}

<nav class='navigation'>
    <div class="wrapper">
        <ul class="navigation-ul">
            <li class='logo'><img src='https://media.istockphoto.com/photos/red-background-ideal-for-christmas-picture-id152119339?k=6&m=152119339&s=612x612&w=0&h=Xxqd9B1xs5JymJYten1-cm2PESGtjen0evjxaCVOqoc='></li>
            <li class='space'></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Albums</a></li>
            <li><a href="#">Tags</a></li>
            <li><a href="#">Upload</a></li>
            <li class='space'></li>
            <li><a href="#">Sign In</a></li>
        		<li><a href="#">Sign Up</a></li>
        </ul>
    </div>
</nav>