17370845950

文章页用flex-column布局实现语义化分层：article设flex-column居中，header内元信息横向对齐，图文组合自适应比例，标签与评论区独立flex容器并响应式优化。

用 Flex 布局个人博客的文章页，核心是把内容自然分层：标题、作者信息、正文、配图、标签、评论区等模块按阅读流有序排列，同时兼顾响应式和语义清晰。

主容器设为 flex，方向垂直

文章页整体用一个 包裹，设 display: flex; flex-direction: column;。这样所有子模块默认从上到下堆叠，符合阅读习惯，也方便后续控制间距和对齐。

• 避免用 float 或绝对定位打乱文档流
• 不推荐 flex-direction: row 做主结构（除非多栏阅读模式）
• 给 article 加 max-width: 800px 和 margin: 0 auto 控制宽度居中

标题与元信息用 flex 横向对齐

文章标题下方常跟作者、发布时间、分类等元信息。用一个

包住它们，设 display: flex; justify-content: space-between; align-items: center;，让标题左对齐、日期/分类右对齐，小图标或徽章可垂直居中。

• 如果信息多导致换行，加 flex-wrap: wrap 并用 gap: 8px 控制间隙
• 移动端可改 flex-direction: column + align-items: flex-start 让信息竖排

正文与配图灵活组合：使用 flex + 自适应比例

图文混排时，不要强行固定宽高。把图片和段落放在同一个

内，设 display: flex; flex-direction: column;；图片用 width: 100%; height: auto; 保持比例，再通过 margin-top/bottom 或 gap 分隔。

• 想让图在文字右侧（桌面端），可对图片加 align-self: flex-end; 并设 max-width: 45%
• 用 @media (min-width: 768px) 切换图文方向，保持可读性
• 避免给
  设固定高度，让文字自然撑开容器

标签与评论区作为底部模块独立 flex 容器

标签列表（

）和评论区（

）各自用 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 调整关系，比硬套栅格更轻量也更可控。