Flex容器为什么不关心其父级块元素？

Question

我想将flex容器的内容放置在横轴的中心。据我所知，“ align-items”将做到这一点，但是要使“ align-items”正常工作，我们需要明确指定高度。我说的对吗？

好的，我明确指定了高度，但在容纳flex容器的“ header”块级元素上。但是，flex容器似乎并不关心块容器。为什么会这样呢？弹性容器是否已从正常流程中移除？

:root {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.header {
  background: orchid;
  height: 100px;
}

.flex-container-1 {
  display: flex;
  align-items: center; /* this doesn't seem to work */
                       /* unless I specify the height on the
                          flex container itself */
}

<header class="header">
    <div class="flex-container-1">
      Flex Container 1
    </div>
</header>

Answer 1

您应将height:100%;赋予.flex-container-1

:root {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.header {
  background: orchid;
  height: 100px;
}

.flex-container-1 {
  display: flex;
  align-items: center;
  height:100%;
}

<header class="header">
    <div class="flex-container-1">
      Flex Container 1
    </div>
</header>