一维布局用flex，二维布局必须用grid；二者应协作而非互斥，外层grid框架内嵌flex子区域，需根据布局维度本质选择技术。

现代网页布局中，display: flex 和 display: grid 是最常用、最实用的两种 CSS 布局机制，HTML 本身不提供“布局代码”，它只提供语义化结构标签（如 <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>），真正的布局能力来自 CSS。

为什么不是 <table> 或 <code>float？

表格布局（<table>）和浮动（<code>float）在历史上曾被用于页面整体布局，但它们存在本质缺陷：

• <table> 违反语义化：它本意是展示二维数据，强行用作布局会导致屏幕阅读器误读、SEO 友好性差、响应式适配极难 <li> <code>float 需要手动清除（clear: both）、父容器高度塌陷常见、多列等高难以保证，稍复杂就容易失控
• 两者都不支持真正的垂直居中、动态缩放、源码顺序与视觉顺序分离等现代需求

display: flex 适合什么场景？

当你需要一维（单行或单列）弹性排列时，display: flex 是首选，比如导航栏、卡片列表、表单控件对齐、居中弹窗等。


anything-to-html
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
下载
• 主轴方向由 flex-direction 控制：row（默认）、column 等
• 子项对齐靠 justify-content（主轴）和 align-items（侧轴），例如 justify-content: center; align-items: center 一行代码就能居中一个元素
• 注意：align-content 仅在多行（flex-wrap: wrap）时生效；单行布局中它不起作用
• 别忘了给父容器设 display: flex，否则子项的 flex 相关属性（如 flex: 1）完全无效

display: grid 什么时候必须用？

当你要处理二维网格（行列都需精确控制）——比如后台仪表盘、响应式图文混排、固定侧边栏+自适应主内容——display: grid 更直接、更可控。

• grid-template-areas 允许你用字符串定义区域名称，再通过 grid-area 把元素“扔”进去，可读性极高
• 示例：grid-template-areas: "header header" "nav main" "footer footer"，配合 header { grid-area: header; }
• 注意：grid 的兼容性在 IE 中几乎为零（display: -ms-grid 仅限旧版 Edge），如需支持 IE11，得降级用 flex 模拟或引入 autoprefixer
• minmax(200px, 1fr) 这类函数能兼顾最小宽度和弹性分配，比单纯写 1fr 更健壮

真正容易被忽略的是：HTML 标签语义和 CSS 布局必须配合使用。比如把侧边栏写成 <div class="sidebar"> 而不是 <code><aside></aside>，虽然样式能做出来，但可访问性、SEO、长期维护成本都会悄悄升高。布局不是“怎么排好看”，而是“怎么排既正确又可持续”。