如何实现日历表头中间动态标题换行时移至新行？

需求说明 #

空间充足时，三个表头元素（月份、动态标题、导航）保持一行排列；当屏幕尺寸过小或标题过长导致布局拥挤时，标题自动换行至单独一行，左右元素保留在上侧两端。

实现代码 #

HTML（无需修改原有结构）

<header class="calHeader">
  <div class="calHeader__month">August 2022</div>
  <div class="calHeader__title">A Dynamic Title That Might Be Very Long</div>
  <div class="calHeader__nav">Prev/Next</div>
</header>

CSS（Flex布局方案，兼容性优异）

.calHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem; /* 可自定义元素间的间距 */
  padding: 0.5rem;
}

.calHeader__month,
.calHeader__nav {
  flex-shrink: 0; /* 禁止左右元素被挤压变形，保证内容完整显示 */
}

.calHeader__title {
  flex-grow: 1; /* 空间充足时填充左右元素间的空隙 */
  min-width: 0; /* 允许标题内容换行，触发布局自动切换 */
  text-align: center; /* 标题居中对齐，符合视觉习惯 */
}

工作原理 #

1. flex-wrap: wrap 允许元素在总宽度超出容器时自动换行
2. flex-shrink: 0 确保月份和导航元素始终显示完整内容，不会被压缩
3. min-width: 0 是核心设置：默认flex元素的最小宽度为内容宽度，设置为0后允许标题内容根据容器宽度换行，当标题过长或容器过窄时，标题元素会被挤到下一行，自动切换为两行布局
4. flex-grow: 1 让标题在空间充足时填充左右空隙，保持居中对齐的视觉效果

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