javascript 活动 class 时 flexbox 行为异常

Question

导航栏 这里是初学者 如您所见，一切正常，直到您单击链接之间的 space，您可以在此处查看 - my codepen。当我点击链接导航栏时，它完美地显示了活动 class，但是如果我在 space 之间点击，整个导航栏就会丢失 class。

var element = document.getElementsByClassName("flex-nav")[0];
element.addEventListener("click", myFunction);
function myFunction(e) {
  var elems = document.querySelector(".active");
  if(elems !==null) {
    elems.classList.remove("active");
  }
  e.target.className = "active";
}

.flex-nav {
  display: flex;
  flex-direction: column;
  margin-top: 54px;
  background: #333;
  width: 75px;
  height: 657px;
  justify-content: space-around;
  align-items: stretch;
  line-height: 23px;
}

.flex-nav a{
  text-decoration: none;
  color: white;
  flex-wrap: wrap;
  text-align: center;
  margin: 5px;
  border: 1px solid transparent;
}

.flex-nav a.active {
  background: #9999ff;
}
.flex-nav a:hover:not(.active) {
 background: #555;
 border: 1px solid rgba(255, 51, 153,1);
}

  <div class="flex-nav">
     <a href="#" style="order:3">2k</a>
     <a href="#" style="order:2">4k</a>
     <a href="#" style="order:4">1080p</a>
     <a href="#" style="order:1">8k</a>
   </div>

Answer 1

您可以通过让 flex 项目增长从而在它们之间没有 space 来避免这种行为：将这些设置添加到 .flex-nav a

flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;

(第一个是为了增长，其他的是为了让里面的文字居中)

javascript 活动 class 时 flexbox 行为异常

flexbox is misbehaving with javascript active class

html

javascript

css

flexbox