用 justify-content: space-between 实现标题左对齐、时间右对齐，需父容器为 flex 布局且仅含两个直系子元素，避免设 flex: 1 或 width: 100% 干扰布局，同时清除 h3 默认 margin 并用 align-items: center 对齐基线。
直接用 justify-content: space-between 就能实现文章标题左对齐、发表时间右对齐，前提是父容器是 flex 布局，且两个子元素（标题和时间）不能设 flex: 1 或 width: 100% —— 否则时间会被撑开，失去“靠右”效果。
为什么不用 text-align: right 单独给时间加样式？
因为 text-align: right 只作用于行内内容，如果时间包裹在 <span></span> 里，而它父容器是块级（比如 <div>），那这个 <code><span></span> 默认会继承父容器宽度，text-align 确实能让文字靠右，但整个 <span></span> 还是占满一行——悬停、点击区域过大，语义也不清。
- 时间元素若设
display: inline-block+text-align: right，又得额外处理换行和垂直对齐 - 若父容器用了
float或position: absolute，后续新增字段（如作者、标签）就难扩展 -
text-align对多行文本有效，但对单个时间戳这种短文本，视觉上“靠右”不等于“紧贴右边缘”，留白不可控
justify-content: space-between 的正确写法
这是最干净的解法，把标题和时间作为同一级子元素放进弹性容器，让它们自动分配主轴空间：
.article-item {
display: flex;
justify-content: space-between;
align-items: center; /* 避免文字基线错位 */
}
.article-title { margin: 0; } /* 清掉默认 margin */
.article-time { font-size: 0.875rem; color: #666; }
- 必须确保只有两个直系子元素：一个标题
<h3 class="article-title"></h3>，一个时间<time class="article-time"></time> - 不要给
.article-time设margin-left: auto—— 这会覆盖space-between的计算逻辑 - IE10/11 需加前缀：
justify-content: -ms-flex-pack: justify;（2026 年仍有不少政务/企业系统需兼容） - 如果标题过长要省略，用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，并给标题加flex: 1—— 注意此时时间元素不能再设flex相关属性，否则会抢空间
当列表项需要垂直堆叠时怎么保持时间右对齐？
如果文章列表是 <ul><li></ul> 结构，每项要垂直排列，但每项内部仍需标题左、时间右，就不能用 flex-direction: row 做整列布局，而要在每个 <li> 内部单独启用 flex：
ul.article-list > li {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid #eee;
}
ul.article-list > li:last-child { border-bottom: none; }
- 别把
justify-content: space-between写在<ul></ul>上——那是控制<li>之间的横向分布，不是单个<li>内部对齐 - 每个
<li>是独立 flex 容器，互不影响；时间不会因上一项内容长而偏移 - 如果时间要响应式隐藏（小屏不显示），直接对
.article-time加display: none即可，flex 布局会自动重排，无需 JS 干预
真正容易被忽略的是：当标题用 <h3></h3>、时间用 <time></time> 时，浏览器默认会给 <h3></h3> 加上下 margin，导致整体高度不一致；align-items: center 能拉齐，但必须确认没其他 margin 或 line-height 干扰。这不是 flex 的问题，是 HTML 元素自带样式残留。
