Flexbox实现含图片与导航菜单的页面头部布局求助

正在学习Flexbox，想要仅用HTML和CSS制作页面头部。该头部包含三个子元素：

• 左对齐的logo
• 紧邻logo右侧的两行文本（标题与副标题）
• 需与logo、标题同行且在页面居中显示的水平导航菜单

附上现有代码，但无法实现预期效果，恳请指导。

现有代码 #

home.html #

<!doctype html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<head>
<link rel="stylesheet" href="css/page-header.css">
</head>
<body>
<span w3-include-html="page-header.html"></span>
<script>
w3IncludeHTML()
</script>
</body>
</html>

page-header.html #

<span class="header-box">
<img class="header-logo" src="images\logo.svg" />
<span class="header-title">Company Title</span>
<span class="header-subtitle">best products</span>
<ul class="header-menu">
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">Gallery</a></li>
<li class="nav-link"><a href="#">Locations</a>/li>
<li class="nav-link"><a href="#">About</a></li>
</ul>
</span>

page-header.css #

@import url("https://use.typekit.net/xul0ipk.css");
.header-box {
padding: 0.5rem;
background-color: beige;
display: flex;
flex-flow: column nowrap;
justify-items: center;
align-items: center;
}
.header-logo {
display: flex;
flex-flow: inherit;
align-self: flex-start;
width: clamp(3.12rem, 2.8692rem + 2.674vw, 6.88rem);
background-color: blue;
}
.header-box span {
flex-flow: row;
display: inline-flex;
align-self: flex-start;
background-color: aliceblue;
}
.header-title {
display: flex;
}

核心问题梳理 #

1. .header-box 设置了垂直方向的Flex布局，无法实现横向排列需求
2. logo与文本未归为同一容器，无法形成左侧整体区块
3. 导航菜单缺少居中对齐的布局设置
4. HTML存在标签闭合错误（/li应为</li>）

修改后的代码 #

page-header.html（调整结构）

<div class="header-box">
  <div class="header-left">
    <img class="header-logo" src="images/logo.svg" />
    <div class="header-text">
      <span class="header-title">Company Title</span>
      <span class="header-subtitle">best products</span>
    </div>
  </div>
  <ul class="header-menu">
    <li class="nav-link"><a href="#">Home</a></li>
    <li class="nav-link"><a href="#">Gallery</a></li>
    <li class="nav-link"><a href="#">Locations</a></li>
    <li class="nav-link"><a href="#">About</a></li>
  </ul>
</div>

page-header.css（优化Flex布局）

@import url("https://use.typekit.net/xul0ipk.css");
.header-box {
  padding: 0.5rem;
  background-color: beige;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  position: relative;
}

/* 左侧logo+文本容器 */
.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  width: clamp(3.12rem, 2.8692rem + 2.674vw, 6.88rem);
  background-color: blue;
}

/* 文本垂直排列容器 */
.header-text {
  display: flex;
  flex-direction: column;
  background-color: aliceblue;
}

.header-title {
  font-weight: bold;
}

.header-subtitle {
  font-size: 0.8rem;
  color: #666;
}

/* 导航菜单居中布局 */
.header-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-link a {
  text-decoration: none;
  color: #333;
}

关键改动说明 #

1. 结构重组：用header-left包裹logo和文本，形成左侧独立区块；用header-text包裹标题和副标题，实现垂直排列
2. Flex方向调整：将.header-box改为横向Flex布局，确保子元素在同一行显示
3. 导航居中实现：通过绝对定位+位移的方式，让导航菜单脱离文档流并水平居中，不影响左侧区块布局
4. 垂直对齐优化：header-left设置垂直居中，让logo与文本在同一高度对齐
5. 修复标签错误：修正导航项的闭合标签

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