本文针对初学者解释为何对 .title-row 容器应用 display: flex 无效——根本原因是 CSS 选择器错误：误用 #title-row（ID 选择器）而非 .title-row（class 选择器），导致样式未生效。
本文针对初学者解释为何对 `.title-row` 容器应用 `display: flex` 无效——根本原因是 css 选择器错误：误用 `#title-row`（id 选择器）而非 `.title-row`（class 选择器），导致样式未生效。
你希望仅对标题区域（.title-row）启用 Flexbox 布局，同时保留主体内容区域使用 CSS Grid 或其他布局方式——这个思路完全正确，也是模块化布局的最佳实践。但当前样式未生效，关键问题在于 CSS 选择器与 HTML 元素不匹配。
在你的 HTML 中：
<div class="title-row"> @@##@@ <p>THE TITLE</p> <div></div> </div>
该 <div> 的属性是 <code>class="title-row"，而非 id="title-row"。而你的 CSS 写的是：
#title-row { /* ← 这里是 ID 选择器，但 HTML 中没有 id="title-row" */
display: flex;
justify-content: center;
width: 100vh;
height: 100vh;
}
浏览器会忽略这条规则，因为找不到匹配的元素，因此 .title-row 实际上仍为默认的 display: block，Flexbox 属性全部失效。
✅ 正确写法应为：
.title-row {
display: flex;
justify-content: center;
align-items: center; /* 推荐添加，实现垂直+水平居中 */
width: 100vw; /* 注意：此处应为 vw（视口宽度），非 vh（高度） */
height: 100vh;
position: relative; /* 为内部绝对定位子元素提供参照 */
}
⚠️ 同时注意几个关键细节：
width: 100vh是错误的：vh表示视口高度单位，width: 100vh会让容器宽度等于屏幕高度（非常规需求）。如需铺满屏幕宽度，请改用width: 100vw或更稳妥的width: 100%。-
移除内部
position: absolute（谨慎使用）：你为.title-img和p设置了position: absolute，这会使它们脱离文档流，不再受 Flexbox 控制。若目标是让图片和文字在 flex 容器中协同居中，应改用 flex 原生方式：.title-row { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .title-row img, .title-row p { margin: 0; }对应 HTML 可简化为：
<div class="title-row"> @@##@@ <p>THE TITLE</p> </div>
避免全局
body { display: flex }：正如你所意识到的，对body应用 Flex 会强制整个页面成为 flex 容器，干扰后续.content区域的 Grid 布局。保持body为默认display: block，只对需要的组件（如.title-row）单独启用 Flex，才是可维护、可扩展的结构。
✅ 总结：
- ✅ 选择器必须匹配：
.title-row（class）≠#title-row（ID）； - ✅ Flex 容器内慎用
position: absolute—— 它会绕过 flex 布局逻辑； - ✅ 使用
align-items+justify-content替代手动top/left偏移，更简洁可靠； - ✅ 单位别混淆：
vw（宽度）vsvh（高度），按需选用。
修复后，你的标题区域将真正响应式居中，且完全解耦于下方 .content 区域——为下一步用 CSS Grid 布局书籍列表打下坚实基础。
