浏览器缩小时，请减小图标之间的间距

Question

我正在尝试使用flex box设计一个导航栏。我有三个div，每当浏览器缩小时，我都想缩小header__center类中图标之间的间距。

* {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
flex-direction: row;
padding: 15px 20px;
}
.header__left>img {
height: 40px;
}
.header__center {
display: flex;
flex-direction: row;
justify-content: center;
}
.header__option {
display: flex;
align-items: center;
padding: 0 30px;
cursor: pointer;
}
.header__right {
display: flex;
}
.header__info {
display: flex;
align-items: center;
padding-right: 12px;
}
.header__info>span {
margin-left: 10px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<div class="header">
<div class="header__left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Free_logo.svg/600px-Free_logo.svg.png" />
</div>
<div class="header__center d-none d-xl-flex d-md-flex">
<div class="header__option">
<i class="fas fa-home"></i>
</div>
<div class="header__option">
<i class="fas fa-users"></i>
</div>
<div class="header__option">
<i class="fas fa-video"></i>
</div>
</div>
<div class="header__right">
<div class="header__info d-none d-xl-flex">
<i class="fas fa-user-circle fa-lg"></i>
<span class="header__info__name">Aakash</span>
</div>
</div>
</div>

将这些图标放在中心并减小间距的最佳方法是什么？或者有什么简单的方法可以处理使用bootstrap 4类的问题吗？

并且div仅在xlmd设备中可见。

Answer 1

以vw而非px为单位测量padding属性。

这表示视口/窗口/选项卡宽度的一小部分。