Html 在导航栏中均匀地隔开链接和居中的徽标

我试图在导航栏中均匀地将链接隔开，使其位于居中徽标的左右两侧

我尝试过很多不同的方法，使用FlexBox是我能做到的最接近的方法。但它仍然不是完美的，也不能很好地缩小规模。我的代码完全是骨瘦如柴，用胶带粘在一起的，但它看起来是这样的：

.flex-header {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.flex-item li {
    list-style: none;
    display: inline-block;
    padding-top: 5px;
    text-transform: uppercase;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    line-height: 1.2em;
    padding: 5px 40px 0 40px;
}


.flex-left { order: 1; }

.flex-right { order: 3; }

.flex-logo { order: 2; }

填充物并不理想，但这就是我必须把它拼凑在一起才能粘住的方法。它也不能保持巨大的分辨率——间距会扭曲。理想情况下，我希望为每个列表项设置一个百分比宽度，但我就是无法使它看起来正确

---

有人有什么建议吗？

将每个导航栏部分（包括图像）封装在它自己的div中

<div class="navSection>Section 1</div>
<div class="navSection>Section 2</div>
<div class="navSection>Image</div>
<div class="navSection>Section 4</div>
<div class="navSection>Section 5</div>

---

你能创建一个工作代码段，包括HTML吗？如果这是你文章的答案，请标记它，这样它也可以帮助其他人。

.navSection {
    float: left;
    width: 20%;
}