Grid 更适合多列自适应帖子列表，Flex 更适合单列流式布局；Grid 用 repeat(auto-fit, minmax(300px, 1fr)) 实现响应式分栏，Flex 用 column 方向处理窄区域；语义化用 <article>，图文对齐需注意 vertical-align 和 object-fit，排序与分页须置于列表容器外层。
论坛帖子列表用 display: grid 或 display: flex 都能做，但 Grid 更稳、更易控制行高/列宽/响应断点；Flex 在单行标题+摘要+元信息堆叠时更轻量，但多列对齐容易错位。
用 Grid 实现带分栏和响应断点的帖子列表
论坛首页常需 2–4 列自适应布局（如桌面端 4 列、平板 2 列、手机 1 列），grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是最实用的写法 —— 它比 auto-fill 更少留白，且不依赖固定列数。
-
gap: 16px必须设，否则卡片贴边难读；row-gap和column-gap分开设也行，但速写更省事 - 每条帖子用
<article>包裹，语义清晰且利于 SEO，别用<div>堆砌 - 标题行高建议用
line-height: 1.4，避免长标题挤成两行后和摘要对不齐 - 发布时间、作者、回复数等元信息统一放在底部
footer或.post-meta，用display: flex; justify-content: space-between横向排布
用 Flex 实现单列流式帖子列表（含头像+悬停态）
移动端或侧边栏“最新帖子”这类窄区域，flex-direction: column + align-items: stretch 是更自然的选择。关键在子项宽度继承父容器，避免手动设 width: 100% 引发盒模型冲突。
- 头像用
flex-shrink: 0锁住尺寸，防止文字撑缩变形；配合margin-right: 12px保持呼吸感 - 悬停时整条
<li>加background-color: #f9f9f9，比只 hover 标题更易点击，也符合用户预期 - 避免对
<li>设height，内容长度不一会导致截断；用min-height控制底线即可 - 如果嵌套二级回复预览（如“Re: XXX 的回复…”），用
text-overflow: ellipsis+white-space: nowrap要慎用 —— 中文断词不准，优先用display: -webkit-box截三行
列表项中图片/附件缩略图的对齐陷阱
带封面图的帖子常出现图文错位：图左文右时，文字基线和图片底边不对齐；图上文下时，图宽不一致导致卡片高度参差。根本原因是默认 vertical-align: baseline 和 img 的内联特性。
立即学习“前端免费学习笔记（深入）”；
- 图左文右布局：给
img加vertical-align: top，同时给文字容器设display: flex; flex-direction: column; justify-content: center对齐中线 - 图上文下布局：统一设
img { width: 100%; height: 160px; object-fit: cover; }，object-fit比background-image更易维护 alt 文本 - 附件图标（PDF/ZIP）别用
<img>，改用 SVG 内联或::before伪元素 + Unicode 字符，减少 HTTP 请求 - 绝对不要给
img设float—— Flex/Grid 下 float 会脱离布局流，造成后续元素塌陷
排序控件与分页器嵌入列表头部的 DOM 结构要点
排序下拉框（如“按热度”“按时间”）和分页器（<nav aria-label="帖子分页">）必须放在列表容器外层，否则会被 grid 或 flex 当作一个普通子项打乱布局。
- 正确结构是：
<section class="forum-list"><header>...排序控件...</header><ol class="post-list">...</ol><nav>...分页...</nav></section> -
<ol>仍可设display: grid，但父容器.forum-list才是真正的网格容器，避免 header/nav 被纳入网格轨道 - 分页按钮用
<button type="button">而非<a>，除非跳转 URL 不同；AJAX 加载时禁用状态要同步加disabled和aria-disabled="true" - 排序控件若用
<select>，务必绑定change事件并更新 URL 参数（如?sort=hot&page=1），方便刷新后恢复状态
真正难的不是写出能显示的列表，而是让不同长度标题、不同数量标签、不同存在状态（已读/未读/置顶）的帖子，在各种屏幕下都保持视觉节奏一致 —— 这得靠 minmax()、clamp() 和足够细粒度的媒体查询组合，而不是一套 CSS 通吃所有情况。
