使用Flexbox实现元素堆叠布局的问题求助

核心思路 #

把<h1>和<p>包裹在一个垂直方向的Flex容器中，让它们在左侧垂直排列；右侧导航栏作为独立的Flex子项，保持在header右侧位置不变。

步骤1：修改HTML结构 #

给标题和作者文本添加父容器，让它们成为一个整体：

<header>
  <div class="header-title">
    <h1>Brushing up</h1>
    <p>by Keller Johnson</p>
  </div>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">project 1</a></li>
    <li><a href="#">project 2</a></li>
  </ul>
</header>

步骤2：调整CSS样式 #

修改header和新增容器的Flex属性，实现预期布局：

.container {
  display: flex;
  margin: 0 auto;
  max-width: 960px;
  flex-direction: column;
}

/* HEADER SECTION***************************************/
header {
  width: 100%;
  /* 替换固定height为auto，让内容撑开高度 */
  height: auto;
  padding: 1em 0;
  display: flex;
  flex-direction: row;
  align-items: center; /* 让左右子项垂直居中 */
  outline: 1px solid red;
}

header * {
  margin: 0;
  padding: 0;
  display: block;
}

/* 标题容器：垂直排列内部元素 */
.header-title {
  flex: 5; /* 占据原h1+p总和的空间比例 */
  display: flex;
  flex-direction: column;
  gap: 0.3em; /* 控制h1和p的垂直间距 */
}

header h1 {
  outline: 1px solid red;
  height: 50px;
}

header p {
  outline: 1px solid red;
  height: 25px;
}

/* 导航栏：保持右侧对齐，内部水平排列 */
header ul {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  outline: 1px solid red;
  list-style-type: none;
}

header ul li {
  margin: 0 0.5em;
}

关键调整说明 #

• 新增.header-title容器并设置flex-direction: column，实现h1和p的垂直堆叠
• 将header的固定height改为auto，避免内容被截断
• 给header添加align-items: center，让左侧标题区和右侧导航栏保持垂直居中对齐
• 给导航栏ul添加display: flex，实现li的水平排列并保持右侧对齐

内容的提问来源于stack exchange，提问作者keller