无法垂直对齐 flexbox 中的项目答案

【问题标题】：Not able to vertically align items in flexbox无法垂直对齐 flexbox 中的项目
【发布时间】：2020-08-03 04:36:09
【问题描述】：

我正在学习使用 flexbox，但我无法在 .headercontent 类内垂直对齐内容。它似乎尊重justify-content 等其他所有内容，但忽略了align-content。我搜索并找到this 线程，这似乎表明父级应该明确设置高度。我通过设置flex-basis 和flex-grow 和min-height 来设置高度。但仍然由包含h1 的div 粘在header 的顶部。我希望那个绿色 div 位于header 的垂直中心。我做错了什么？

html {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-size: 100%;
            line-height: 1.2em;
          }
          body {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            height: 100vh;
            background-color: #cdc9c1;
          }
          header {
            background-color: #a99879;
            flex-basis: 10%;
            flex-grow: 1;
            min-height: 20px;
          }
          main {
            background-color: #5b431a;
            flex-basis: 80%;
            flex-grow: 8;
          }
          footer {
            background-color: #77613c;
            flex-basis: 10%;
            flex-grow: 1;
          }
          .headercontent {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            background-color: green;
            min-height: 20px;
          }
          .navstyle {
            list-style-type: none;
          }

<html>
      <head>
      </head>
      <body>
        <header>
          <div class="headercontent">
            <h1>This is the header</h1>
        </div>
        </header>
        <nav>
          <ul>
            <li>section1</li>
            <li>section2</li>
            <li>section3</li>
          </ul>
        </nav>
        <main>
          <p> this is the main body</p>
        </main>
        <footer>
          <p> this is the footer </p>
        </footer>
      </body>
    </html>

这是我工作的可待因链接https://codepen.io/knows_not_much/pen/rNxXoOM

【问题讨论】：

标签： css flexbox

【解决方案1】：

我希望绿色 div 位于标题的垂直中心。什么我做错了吗？

您的 header 元素占据了 body 的 10% 高度。您的.headercontent 不会占据header 的整个定义高度。因此，它将坐在顶部。为了解决这个问题，您可以将header 元素分配为一个弹性容器，这就是您分配align-items: center; justify-content: center 属性的地方

header {
    background-color: #a99879;
    flex-basis: 10%;
    flex-grow: 1;
    display: flex; /* add these */
    align-items: center; /* add these */
    justify-content: center; /* add these */
}

如果您必须让绿色背景占据空间，则随后（根据需要）将width: 100% 分配给.headercontent

【讨论】：

谢谢。如果我这样做，我怎么知道哪个是给父母的，哪个是给自己的？所以在你的代码中flex-basis 和flex-grow 是用于父弹性，而其他是用于自我弹性。我创建 headercontent 类只是为了避免混合两个 flexboxes 的设置
你的建议有效，我得到了我想要的，但它只是混淆了父子弹性框的设置。
flex-basis & flex-grow 属性主要用于弹性项目（即弹性容器/父项的子项）。我明白你在说什么 - 它不会因为它自己或它的孩子而混淆，因为这些属性仅适用于自己提供它是弹性容器内的弹性项目。与align-items 或align-self 之类的属性相比：这些属性可以为它自己或它的子代（如果它是一个弹性容器）& 它的行为很容易根据措辞来区分：例如，单词“self”