在 flexbox 中不起作用的锚元素上变换比例

Question

我正在使用 flexbox 作为页面顶部的导航栏。我只包含了这部分的代码，因为该项目是一个完整的站点。我网站上的所有锚标记的样式都相同，悬停时具有相同的 transform: scale(1.2) 特征。除了我的导航之外，这在任何地方都有效。在我的导航中似乎没有任何东西可以缩放。

此外，在这个 codepen 上，flexbox 似乎不尊重 justify-content: space-around，这使得锚点看起来比在我的实际网站上更拥挤。

代码笔：https://codepen.io/colesam/pen/YxLPVW

a {
  color: #646c84;
  font-weight: 500;
  line-height: 1.7vw;
  transition: all 0.2s;
}

a:hover {
  color: #ffaf54;
  cursor: pointer;
  transform: scale(1.2);
  text-decoration: none;
}

a:focus {
  color: #646c84;
  text-decoration: none;
}

a:focus:hover {
  color: #ffaf54;
  cursor: pointer;
}

.active-indicator {
  background: #ffaf54;
  border-radius: 25px;
  height: 2px;
  margin-top: -2px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transition: all 0.2s;
  width: 25px;
}

.active-indicator.active {
  opacity: 1;
}

#menu {
  background: whitesmoke;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0 25vw;
  position: fixed;
  left: -1;
  right: -1;
  top: 0;
  transition: all 0.2s;
  z-index: 1;
}

#menu a {
  font-size: 0.9vw;
}

#menu.inactive {
  opacity: 0;
}

<div id="menu">
  <div id="landing-nav">
    <a>Home</a>
    <div class="active-indicator active"></div>
  </div>
  <div id="about-nav">
    <a>About</a>
    <div class="active-indicator"></div>
  </div>
  <div id="portfolio-nav">
    <a>Portfolio</a>
    <div class="active-indicator"></div>
  </div>
  <div id="resume-nav">
    <a>Resume</a>
    <div class="active-indicator"></div>
  </div>
  <div id="contact-nav">
    <a>Contact</a>
    <div class="active-indicator"></div>
  </div>
</div>

Answer 1

您为固定导航使用了无效的属性值。

替换

left: -1;
right: -1;

和

left: 0;
right: 0;

我不确定为什么 transform: scale 不起作用，但可以通过将 div 包装锚标签的显示值更改为 flex[= 来解决这个问题16=]

Codepen

Answer 2

您的导航菜单没有额外的宽度，因此弹性项目被打包在一起。

是的，你创造了宽度的错觉：

#menu { padding: 0 25vw; }

但这只是在容器的左侧和右侧添加了填充。东西还是挤在一起，justify-content没space干活

revised codepen（删除填充）

尝试使用 width: 50vw.

之类的东西而不是填充

revised codepen（删除填充；添加宽度）

transform: scale() 的问题是您将它应用于行内级元素 (a)，该元素不是可转换元素。

将 display: block 添加到锚元素，或将转换应用于父元素 div。

revised codepen（删除填充；添加宽度；添加 display: block 到 a 个元素）

参考文献：

在 flexbox 中不起作用的锚元素上变换比例

Transform scale on anchor elements not working in flexbox

html

css

flexbox

css-transforms