通过 flex-wrap 结合 gap: 18px 5px 与父容器 width: 100%，可让上下标题在空间充足时并排显示（水平间距 5px），空间不足时自动换行（垂直间距 18px），同时保持左侧边框始终等高包裹全部内容。
通过 `flex-wrap` 结合 `gap: 18px 5px` 与父容器 `width: 100%`，可让上下标题在空间充足时并排显示（水平间距 5px），空间不足时自动换行（垂直间距 18px），同时保持左侧边框始终等高包裹全部内容。
在响应式标题设计中，常需兼顾视觉一致性与布局弹性：既要保证 .upper-title 和 .lower-title 在宽屏下水平并列、紧凑呈现，又要在窄屏（如手机）下优雅换行，并显著拉开垂直间距以提升可读性。关键挑战在于——同一组元素需根据容器宽度动态切换“行内间距”与“行间间距”，且左侧边框必须自适应整体高度。
解决方案的核心在于 CSS Flexbox 的二维间距控制能力：
Flex 容器支持 gap 属性接受两个值——gap: <row-gap><column-gap></column-gap></row-gap>。当设置为 gap: 18px 5px 时：
- 水平方向（同排元素间）固定为
5px； - 垂直方向（换行后上下行之间）自动采用
18px； - 而单行状态下，因无换行，
18px的行间距不会生效，完美满足“仅换行时才启用大间距”的需求。
✅ 正确实现代码如下：
.title-wrapper {
display: flex;
flex-wrap: wrap;
color: #FFFFFF;
border-left: 1px solid white;
padding-left: 2.2%;
gap: 18px 5px; /* ← 关键：垂直18px，水平5px */
}
/* 子项无需额外浮动或定位，flex 默认主轴为 row */
.upper-title,
.lower-title {
margin: 0; /* 重置默认外边距 */
}
<!-- 注意：title-wrapper 的父容器必须有明确宽度（如 100%）才能触发布局计算 -->
<div style="width: 100%;"> <!-- ← 必须添加！否则 flex 容器宽度不确定，换行逻辑失效 -->
<div class="title-wrapper">
<div class="upper-title">DYNAMICALLY ADDING TITLE</div>
<div class="lower-title">DYNAMICALLY ADDING TITLE</div>
</div>
</div>
⚠️ 重要注意事项：
-
gap在 Flexbox 中兼容性良好（Chrome 84+/Firefox 63+/Safari 14.1+），若需支持更老浏览器，可降级为margin+@container查询（现代方案推荐gap）； - 父容器
width: 100%不可省略——它确保 flex 容器能准确判断剩余空间是否足够容纳两子项并排，从而正确触发flex-wrap换行； - 左侧边框
border-left天然随 flex 容器高度自适应，无论单行或双行，均完整覆盖所有子项总高度，无需 JS 计算或伪元素模拟。
该方案简洁、语义清晰、零 JavaScript，是响应式标题布局的现代最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
