Flexbox 一维布局适合组件内对齐，Grid 二维布局适合页面骨架；二者配合时 Grid 控制区域划分，Flex 控制内部排列，避免嵌套混乱与响应式失控。
弹性布局（Flexbox）本身就能做响应式，但单独用它处理复杂页面结构容易失控；真正稳定的做法是让它和 Grid 配合，各管一层。
为什么不能只靠 display: flex 做整页响应式
Flexbox 是一维的，适合控制行或列内元素的对齐、换行、伸缩，但不适合同时管理“头部+侧边栏+主内容+页脚”这种二维区域划分。强行用 Flex 拉出整页结构，一旦加媒体查询切换方向（比如 flex-direction: column → row），子项顺序、对齐、间距全得重调，维护成本高。
常见错误现象：justify-content 在小屏下突然失效、flex-wrap 触发后元素堆叠错乱、嵌套多层 flex 导致 align-items 行为不可预测。
- Flexbox 适合：导航栏内链接对齐、卡片列表换行、表单控件水平排列
- Grid 适合：定义页面骨架（如
grid-template-areas: "header header" "nav main" "footer footer"） - 二者嵌套时，Grid 控制“在哪”，Flex 控制“怎么排”
Grid 容器里嵌套 Flex 子项的实操要点
典型场景：左侧固定宽度导航栏 + 右侧主内容区，小屏时导航收起，主内容占满全宽。
立即学习“前端免费学习笔记（深入）”；
做法不是给整个页面设 display: flex，而是：
- 外层用
display: grid，定义grid-template-columns: 240px 1fr - 把导航栏和主内容分别放进两个网格单元格
- 在主内容区这个
<section></section>上再加display: flex; flex-direction: column，用来垂直排列标题、正文、按钮 - 这样，媒体查询只需改 Grid 的列定义（如
@media (max-width: 768px) { grid-template-columns: 1fr; }），内部 Flex 结构完全不用动
注意：不要在 Grid 容器上同时写 display: grid 和 display: flex —— 后者会覆盖前者，直接失效。
flex-wrap 和 minmax() 配合做流式卡片布局
要做响应式图片墙、商品列表这类“自动换行+等宽不等高”的效果，别只依赖 flex-wrap: wrap，它无法控制最小宽度，小屏下卡片可能被压得太窄。
更可靠的方式是：
- 父容器设
display: grid，用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 每个卡片内部用
display: flex; flex-direction: column控制标题、图片、描述的垂直顺序 - 这样既保证每张卡最小 280px，又能在大屏下自动填满整行，且无需 JS 计算列数
如果硬要用纯 Flex 实现类似效果，必须配合 flex-basis 和媒体查询手动切断点，代码量翻倍，且断点之间存在空白间隙。
对齐属性冲突最容易被忽略的地方
Grid 和 Flex 都有 justify-content、align-items，但作用对象不同：Grid 的这些属性控制的是网格项（grid items）在网格轨道（track）里的位置；Flex 的则控制的是弹性项（flex items）在主轴/交叉轴上的位置。
当 Grid 单元格内又用了 Flex，就可能出现双重对齐叠加，比如：
- Grid 容器设了
align-items: center（让所有网格项垂直居中） - 某个网格项自己又是 Flex 容器，也设了
align-items: center（让它的子项垂直居中） - 结果是两层居中叠加，看起来“偏移了”，其实只是计算逻辑叠加了
解决办法：优先用 Grid 的对齐控制整体位置，Flex 的对齐只用于其子项内部；如果某网格项不需要居中，显式写 align-self: start 覆盖 Grid 的 align-items。
