一维布局用flex，二维布局必须用grid；二者应协作而非互斥，外层grid框架内嵌flex子区域，需根据布局维度本质选择技术。
现代网页布局中，display: flex 和 display: grid 是最常用、最实用的两种 CSS 布局机制，HTML 本身不提供“布局代码”，它只提供语义化结构标签（如 <header>、<nav>、<main>、<aside>、<footer>），真正的布局能力来自 CSS。
为什么不是 <table> 或 float？
表格布局（<table>）和浮动（float）在历史上曾被用于页面整体布局，但它们存在本质缺陷：
-
<table>违反语义化：它本意是展示二维数据，强行用作布局会导致屏幕阅读器误读、SEO 友好性差、响应式适配极难 -
float需要手动清除（clear: both）、父容器高度塌陷常见、多列等高难以保证，稍复杂就容易失控 - 两者都不支持真正的垂直居中、动态缩放、源码顺序与视觉顺序分离等现代需求
display: flex 适合什么场景？
当你需要一维（单行或单列）弹性排列时，display: flex 是首选，比如导航栏、卡片列表、表单控件对齐、居中弹窗等。
- 主轴方向由
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"> 而不是 <aside>，虽然样式能做出来，但可访问性、SEO、长期维护成本都会悄悄升高。布局不是“怎么排好看”，而是“怎么排既正确又可持续”。
