html - flexbox 元素不会到达容器的末尾

Question

嘿伙计们，我不确定我做错了什么，但是当我使用 justify-content: space-between; 时，我希望第 3 个 li 元素(输入)到达容器的末尾； - 没有任何反应，我已经尝试对齐它们，但仍然没有。

nav {
  width: 100%;
  background-color: black;
  padding-left: 30px;
  padding-right: 10px;
}

.navContact {
  margin-left: auto;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mainNav {
  display: flex;
}

.navitem a {
  color: white;
  text-decoration: none;
  border-right: 2px solid rgb(255, 123, 0);
  padding: 10px 15px;
}

<hr class="hrNav">
<nav class="navbar">
  <ul class="mainNav">
    <li class="navitem"><a href="#about">About me</a></li>
    <li class="navitem"><a href="#contact">Contact</a></li>
    <li class="navitem"><input type="text" placeholder="Search..."></li>
  </ul>
</nav>

Answer 1

可以在ul和ul的最后一项设置flex: 1，然后设置margin-left: auto 在最后一个 li 里面 ul 也是如此

*,
*::after,
*::before {
  box-sizing: border-box
}

nav {
  width: 100%;
  background-color: black;
  padding-left: 30px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
}

.mainNav {
  display: flex;
  flex: 1;
}

.navitem a {
  color: white;
  text-decoration: none;
  border-right: 2px solid rgb(255, 123, 0);
  padding: 10px 15px;
}

.navitem:last-of-type {
  margin-left: auto
}

<hr class="hrNav">
<nav class="navbar">
  <ul class="mainNav">
    <li class="navitem"><a href="#about">About me</a></li>
    <li class="navitem"><a href="#contact">Contact</a></li>
    <li class="navitem"><input type="text" placeholder="Search..."></li>
  </ul>
</nav>