如何让Inline Flex元素与多行标签最后一行同行排列？

当前遇到的问题：想要让.post-meta元素填充<h1>标题旁的空白，但<h1>默认宽度占满100%，导致.post-meta被挤到标题下方。当屏幕宽度较小时，<h1>文本换行到第二行，可.post-meta依然出现在整个标题的下一行，而非标题文本旁的空白处。

问题示意图说明：标题文本占据两行，右侧及第二行标题旁存在空白区域，但元信息块却在标题下方单独一行显示。

相关代码 #

CSS代码 #

.post {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 10px;
}

.post-title {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.post-meta {
  display: block;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

HTML代码 #

<div class="post">
  <h1 class="post-title"><a href="#">A Long Post Title but not too long to be obnoxious</a></h1>
  <div class="post-meta">
    <div class="post-date">11 November 2022</div>
    <div class="post-category"><a href="#">Writing, Religion</a></div>
  </div>
</div>

解决方法 #

核心问题确实是<h1>默认是块级元素，宽度占满父容器100%，导致flex布局中它单独占据一行。要实现元信息填充标题旁空白的效果，可按以下方式调整：

• 调整.post-title的显示属性，取消块级显示，让宽度由内容决定：

  .post-title {
    display: inline; /* 替换原block属性，让标题宽度随内容收缩 */
    white-space: normal; /* 允许标题文本自然换行 */
  }
  

• 修改.post容器的flex设置，确保元素能灵活换行并对齐：

  .post {
    display: flex; /* 若需容器随内容宽度收缩可保留inline-flex */
    flex-wrap: wrap;
    align-items: flex-start; /* 让元信息与标题顶部对齐 */
    column-gap: 10px;
  }
  

• 优化.post-meta的flex属性，防止被压缩并控制换行逻辑：

  .post-meta {
    flex-shrink: 0; /* 避免元信息因空间不足被压缩变形 */
  }
  

调整后，当屏幕宽度足够时，.post-meta会与标题同行；当标题换行后，.post-meta会自动填充标题第二行旁的空白区域，而非被挤到标题下方。

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