为什么当我证明内容时，标题部分比它应该的要高得多？

Question

为什么标题部分比我证明内容时应有的高度高？

当我将 header__container 的 justify 内容设置为空格时，标题开始超出其边距。请帮忙。

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

Answer 1

您已将容器高度设置为 100%，但有时该高度不足以容纳您的内容。因为您已将其居中，所以顶部的某些部分被切掉了，底部也一样。

改为设置min-height。

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

Answer 2

现在我可以看到，当您使用 flex-direction: column; 时，您的 justify-content 会进行垂直对齐。

在这种情况下，您不需要使用 flex-direction: column，因为这是 display: block 元素的常见行为

Answer 3

尝试删除justify-content: space-around;，它在小屏幕上执行您所说的操作，因为您在header 上强制设置高度（为什么？）但其中包含“更大”的项目（您的图像）。请记住，“过多的 CSS”通常是它的祸根——少即是多。

注意，我设置了一个边框，以便我们可以直观地看到这些块。

header {
  height: calc(100vh - 80px);
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  /*justify-content: space-around;*/
}

.header__container>* {
  border: solid lime 1px;
}

<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>

替代选项：停止做高度，让“流动”流动。

header {
  /*height: calc(100vh - 80px);*/
}

.header__container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.header__container>* {
  border: solid lime 1px;
}

<header>
  <div class="header__container">
    <div class="header__description">
      <h1>Lebanon's most awarded online library platform</h1>
      <h2>Find your dream book with <span class="purple">Library</span></h2>
    </div>
    <figure class="header__img--wrapper">
      <img src="https://via.placeholder.com/200" alt="">
    </figure>
  </div>
</header>