为什么 title 元素占据了容器中的所有垂直 space？

Question

header 中的主标题占据了所有垂直 space 并将 h2 从中心移到右边，它应该在它下面并且没有连接除了在同一个容器中。

这些是我尝试过的一些方法，但即使只是在 <p> 标签中添加标题也会占用所有垂直 space.

div class ="header-wrap">
    <header>
      <div class="span-wrap">
        <span id="my">My</span> 
        <span id="journey">Journey</span> 
        <span id="of">of </span>
        <span id="learning">Learning</span></div>
      <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
    </header></div>

这里是css

 header-wrap, header{

  display:flex;
  color:white;  
  background-color:red;
  height: 100vh;
  width:100vw;}

h2 {

  font-size:25px;
  letter-spacing:2px;
  font-family:'Raleway';
  align-self:flex-end;}

.span-wrap{

  display:flex;
  justify-content:center;}


#my{
  font-size:55px;
  position:relative;
  top:30px;
}
span{
  max-height: 65px;
  display:block;
}
#journey{
  top:80px;
  font-size:55px;
  position:relative;
}
#of{
   top:120px;
  font-size:45px;
  position:relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height:60px;}
#learning {
   top:185px;
  font-size:55px;
  position:relative;  
}

我希望 <h2>Documenting the Learning Process in a Fun Interactive way! </h2> 位于 div 底部的中心，不受 "Journey of Learning" 部分的影响。

Answer 1

您必须在此处使用 列 flexbox，方法是将 flex-direction: column 添加到您的 header，然后：

将flex: 1添加到span-wrap（在放置 h2之后占用可用的空闲space从而将其推到底部）
将 h2 元素更改为 align-self: center

参见下面的演示：

html body {
  font-family: 'Raleway';
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
}

ul li {
  display: none;
}

header-wrap,
header {
  display: flex;
  color: white;
  background-color: red;
  height: 100vh;
  width: 100vw;
  flex-direction:column; /* added */
}

h2 {
  font-size: 25px;
  letter-spacing: 2px;
  font-family: 'Raleway';
  align-self: center; /* changed */
}

.span-wrap {
  display: flex;
  justify-content: center;
  flex: 1; /* added */
}

#my {
  font-size: 55px;
  position: relative;
  top: 30px;
}

span {
  max-height: 65px;
  display: block;
}

#journey {
  top: 80px;
  font-size: 55px;
  position: relative;
}

#of {
  top: 120px;
  font-size: 45px;
  position: relative;
  margin: 0 35px;
  border: solid;
  padding: 1px 15px;
  max-height: 60px;
}

#learning {
  top: 185px;
  font-size: 55px;
  position: relative;
}

<div class="header-wrap">
  <header>
    <div class="span-wrap">
      <span id="my">My</span> <span id="journey">Journey</span> <span id="of">of </span><span id="learning">Learning</span></div>
    <h2>Documenting the Learning Process in a Fun Interactive way! </h2>
  </header>
</div>
<nav>
  <ul>
    <li>Arrays</li>
    <li>Objects</li>
    <li>Apps</li>
    <li>Design</li>
  </ul>
</nav>
<section>
</section>

为什么 title 元素占据了容器中的所有垂直 space？

Why is the title element taking up ALL the verticle space in the container?

html

css

centering

flexbox