文章页用flex-column布局实现语义化分层：article设flex-column居中，header内元信息横向对齐，图文组合自适应比例，标签与评论区独立flex容器并响应式优化。
用 Flex 布局个人博客的文章页，核心是把内容自然分层：标题、作者信息、正文、配图、标签、评论区等模块按阅读流有序排列，同时兼顾响应式和语义清晰。
主容器设为 flex，方向垂直
文章页整体用一个 <article> 包裹，设 display: flex; flex-direction: column;。这样所有子模块默认从上到下堆叠，符合阅读习惯，也方便后续控制间距和对齐。
- 避免用
float或绝对定位打乱文档流 - 不推荐
flex-direction: row做主结构（除非多栏阅读模式） - 给
article加max-width: 800px和margin: 0 auto控制宽度居中
标题与元信息用 flex 横向对齐
文章标题下方常跟作者、发布时间、分类等元信息。用一个 <header> 包住它们，设 display: flex; justify-content: space-between; align-items: center;，让标题左对齐、日期/分类右对齐，小图标或徽章可垂直居中。
- 如果信息多导致换行，加
flex-wrap: wrap并用gap: 8px控制间隙 - 移动端可改
flex-direction: column+align-items: flex-start让信息竖排
正文与配图灵活组合：使用 flex + 自适应比例
图文混排时，不要强行固定宽高。把图片和段落放在同一个 <section> 内，设 display: flex; flex-direction: column;；图片用 width: 100%; height: auto; 保持比例，再通过 margin-top/bottom 或 gap 分隔。
立即学习“前端免费学习笔记（深入）”；
- 想让图在文字右侧（桌面端），可对图片加
align-self: flex-end;并设max-width: 45% - 用
@media (min-width: 768px)切换图文方向，保持可读性 - 避免给
<p>设固定高度，让文字自然撑开容器
标签与评论区作为底部模块独立 flex 容器
标签列表（<ul class="tags">）和评论区（<section class="comments">）各自用 flex 布局：横向滚动标签用 display: flex; gap: 8px; overflow-x: auto;；评论列表用 flex-direction: column; gap: 24px; 清晰分隔每条评论。
- 标签容器加
padding-bottom: 8px防止滚动条遮挡文字 - 评论输入框可设
align-self: flex-start，避免拉满整行宽度 - 用
flex-shrink: 0防止评论区被压缩变形
Flex 不是用来“炫技”的，而是让结构更贴近内容逻辑——标题优先、图文连贯、操作入口明确。写好语义标签，再用 flex 调整关系，比硬套栅格更轻量也更可控。
