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

【问题标题】：Why doesn't align-content / align-items work here?为什么 align-content / align-items 在这里不起作用？
【发布时间】：2015-10-24 02:59:44
【问题描述】：

所以我只是想制作一个简单的导航栏，然后开始使用 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>

这到底为什么不让我的物品垂直居中？请帮助我，因为我完全不知道为什么这不起作用。尽管它可能只是一些简单的事情。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你有两个问题：

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

http://jsfiddle.net/qdv54k6f/

【讨论】：

【解决方案2】：

这与弹性盒无关。只需将行高设置为 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>

【讨论】：

如果反对者愿意解释，也许我们可以达成一项交易，让您的代表点数回来。
但这并不能真正回答我的问题。我想知道如何使用 flexbox 来做到这一点，因为我非常有信心这是使用它们的目的之一。我知道我可以使用 line-height 但我希望能够使用 align-items。或者至少知道为什么它在这种情况下不起作用？
@DevSock 好吧，navbar_content_wrapper 没有设置高度，所以它将具有默认高度（即一行文本）。没有CSS可以告诉它。 flex 属性不会将 navbar_content_wrapper 增加到更大的高度。
只是好奇，您在阅读我的回答后是否进行了编辑？
@cimmanon 是的，但我先在这里向 OP 发表了评论，在我这样做之前，所以你可以看到我已经意识到高度是问题所在。或者说身高不足。顺便说一句，我仍然认为我原来的解决方案更好，因为它可以使用和不使用 flexbox。