为什么 align-content / align-items 在这里不起作用？

Question

所以我只是想制作一个简单的导航栏，并且我刚开始使用 flexbox。为什么 align-content 在这里不起作用？我可以让 justify-content 工作，但我就是无法垂直对齐。这是代码。

* {
    margin: 0;
    padding: 0;
}

#Navbar_Wrapper {

}

#Navbar {
    width: 100%;
    height: 300px;
    background: darkslategray;
}

#Navbar_Content_Wrapper {
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: center;
    align-content: center;
}

#Navbar_Content_Wrapper li {
    display: inline-block;
}

#Navbar_Content_Wrapper a {
    color: white;
    font: 16px normal Arial;
    text-decoration: none;
    padding: 5px 10px 5px 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="CSS Files/Navbar.css"/>
</head>
<body>
<section id="Navbar_Wrapper">
    <div id="Navbar">
        <div id="Navbar_Content_Wrapper">
            <div id="#Navbar_Content_Left">
                <ul>
                    <li><a href="#" id="Navbar_Home">Home</a></li>
                    <li><a href="#" id="Navbar_Forum">Forum</a></li>
                    <li><a href="#" id="Navbar_Search">Search</a></li>
                    <li><a href="#" id="Navbar_Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>
</body>
</html>

为什么这不能使我的项目垂直居中？请帮助我，因为我完全不知道为什么这不起作用。尽管它可能只是一些简单的东西。

Answer 1

这与弹性盒无关。只需将行高设置为 300px 即可。（也适用于非弹性盒。）

* {
  margin: 0;
  padding: 0;
}
#Navbar_Wrapper {} #Navbar {
  width: 100%;
  height: 300px;
  background: darkslategray;
}
#Navbar_Content_Wrapper {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: center;
  align-content: center;
  line-height: 300px;
}
#Navbar_Content_Wrapper li {
  display: inline-block;
}
#Navbar_Content_Wrapper a {
  color: white;
  font: 16px normal Arial;
  text-decoration: none;
  padding: 5px 10px 5px 0px;
}

  <section id="Navbar_Wrapper">
    <div id="Navbar">
      <div id="Navbar_Content_Wrapper">
        <div id="#Navbar_Content_Left">
          <ul>
            <li><a href="#" id="Navbar_Home">Home</a></li>
            <li><a href="#" id="Navbar_Forum">Forum</a></li>
            <li><a href="#" id="Navbar_Search">Search</a></li>
            <li><a href="#" id="Navbar_Contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

编辑：或高度或路线。傻我。

* {
  margin: 0;
  padding: 0;
}
#Navbar_Wrapper {} #Navbar {
  width: 100%;
  height: 300px;
  background: darkslategray;
}
#Navbar_Content_Wrapper {
  width: 100%;
  display: flex;
  list-style: none;
  justify-content: center;
  align-content: center;
  height: 300px;
  align-items:center;
}
#Navbar_Content_Wrapper li {
  display: inline-block;
}
#Navbar_Content_Wrapper a {
  color: white;
  font: 16px normal Arial;
  text-decoration: none;
  padding: 5px 10px 5px 0px;
}

  <section id="Navbar_Wrapper">
    <div id="Navbar">
      <div id="Navbar_Content_Wrapper">
        <div id="#Navbar_Content_Left">
          <ul>
            <li><a href="#" id="Navbar_Home">Home</a></li>
            <li><a href="#" id="Navbar_Forum">Forum</a></li>
            <li><a href="#" id="Navbar_Search">Search</a></li>
            <li><a href="#" id="Navbar_Contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

Answer 2

这里有 2 个问题：

你用错了属性。 align-content 用于在多行弹性项目之间分配 space（例如，使用 flex-wrap: wrap）。您正在寻找 align-items 属性。
没有额外的 space 可以分发。高度是在弹性容器的父元素 (#Navbar) 上设置的，而不是在弹性容器本身 (#Navbar_Content_Wrapper) 上设置的。换句话说，您的 flex 容器仅与其内容一样高。

http://jsfiddle.net/qdv54k6f/

为什么 align-content / align-items 在这里不起作用？

Why doesn't align-content / align-items work here?

html

css

flexbox