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

Question

标题中的主标题占据了所有垂直空间并将h2从中心向右移动，应该在其下面并且除了在同一个容器中之外没有连接。

https://codepen.io/ychalfari/pen/JVYoNW

https://codepen.io/ychalfari/pen/mgVdLr

这些是我尝试过的几件事，但即使只是在<p>标签中占据标题也占据了所有的垂直空间。

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底部为中心。

Answer 1

你必须在flex-direction: column中加入header，然后通过以下方式使用列flexbox：

• 将flex: 1添加到span-wrap（放置h2后占据可用的自由空间，从而将其推到底部）
• 为align-self: center元素更改为h2

见下面的演示：

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>