align items: center hide tags-CodePudding

I have a problem with display: flex, align-items: center

This is my html file and CSS file:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Kumbh Sans', sans-serif;
}

.navbar {
  background: #131313;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar__item {
  background: yellow;
}

.navbar__link {
  border: 2px solid red;
}

<body>
  <div >
    <div >
      <a href="/" id="navbar__logo">NEXT</a>
      <div  id="mobile-menu">
        <span ></span>
        <span ></span>
        <span ></span>
      </div>
      <ul >
        <li >
          <a href="/" >Home</a>
        </li>
        <li >
          <a href="/" >Tech</a>
        </li>
        <li >
          <a href="/" >Products</a>
        </li>
        <li >
          <a href="/" >Sign Up</a>
        </li>
      </ul>
    </div>
  </div>
</body>

I spent the whole afternoon looking for the answer, but haven't fount it yet.

The first, some items in the class = narbar__menu be hide, i dont know why, i comment align-item: center in .navbar of css file and it comes back. After I read about display: flex, but i still can't explain

The second, i uncomment align-item: center in .navbar of css file and i crease the value of height in .navbar to 100px, the items are not hide anymore.

Those are two things I don't understand, please explain to me

I already read