浏览器缩小时缩小图标间距答案

【问题标题】：Reduce the spacing between the icons when browser shrinks浏览器缩小时缩小图标间距
【发布时间】：2020-08-29 16:10:01
【问题描述】：

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

* {
  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 仅在 xl md 设备中可见。

【问题讨论】：

使用 vw 代替 px 进行填充。 vw 代表视图宽度，它是根据屏幕宽度测量的，因此它会自动调整。在你的情况下尝试 2vw 而不是 30px 左右填充
那行得通...但这是最合适的方式吗？
是的，如果您希望尺寸是动态的，请使用百分比或 vw 而不是像素
您也可以尝试使用 vmin 或 vmax ：css-tricks.com/simple-little-use-case-vmin

标签： css bootstrap-4

【解决方案1】：

以vw 为单位衡量您的padding 属性，而不是px。

这代表视口/窗口/标签宽度的一小部分。

【讨论】：