在不在flexbox

Question

我在页面顶部使用了一个flexbox作为我的导航栏。我只包含了此部分的代码，因为该项目是一个完整的站点。我网站上的所有锚标签的样式都相同，悬停时具有相同的transform: scale(1.2)特征。除了在我的导航中，这适用于任我的导航内部似乎没有任何扩展。

此外，在此代码中，flexbox似乎并不尊重justify-content: space-around，这使得锚点看起来比在我的实际站点上更加挤压。

Codepen：https://codepen.io/colesam/pen/YxLPVW

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的导航菜单没有额外的宽度，因此将灵活项目打包在一起。

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

#menu { padding: 0 25vw; }

但这只是在容器的左侧和右侧添加了填充。这些项目仍然打包在一起，justify-content没有空间可以工作。

• revised codepen（已删除填充）

请尝试使用width: 50vw。

之类的内容，而不是填充

• revised codepen（已删除填充;已添加宽度）

transform: scale()的问题在于您将其应用于内联级元素（a），这不是可转换元素。

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

• revised codepen（已删除填充;已添加宽度;已将display: block添加到a元素）

参考文献：

• https://drafts.csswg.org/css-transforms/#transform-property
• https://drafts.csswg.org/css-transforms/#transformable-element

Answer 2

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

替换

left: -1;
right: -1;

与

left: 0;
right: 0;

我不确定为什么transform: scale无效，但可以通过更改div将锚标记包装到flex

的显示值来修复

Codepen