Flexbox适合一维布局如三栏等高，需父容器设display: flex和min-height；Grid适合二维布局如响应式卡片，用auto-fit+minmax；二者应分层使用：Grid管页面骨架，Flex管组件内对齐。
用 display: flex 实现三栏等高布局
Flexbox 最适合处理一维流式结构，比如顶部导航 + 主体内容 + 底部页脚，或左右侧边栏 + 中间主内容。关键在于父容器设 display: flex，子项自动沿主轴排列，且默认拉伸高度对齐。
常见错误是忘记给父容器设高度（如 min-height: 100vh），导致子项无法等高；或没设 flex-direction，在小屏下横向溢出。
- 顶部固定高：用
header { flex: 0 0 60px; }（不缩放、不增长、固定 60px） - 主内容自适应：用
main { flex: 1; }（占据剩余空间） - 底部固定高：同 header，但注意避免父子 margin 合并导致空白
-
移动端适配：在媒体查询中改
flex-direction: column，让三栏垂直堆叠
用 display: grid 实现响应式网格卡片布局
Grid 更适合二维布局，比如商品列表、图库、仪表盘。直接定义行/列轨道比 Flex 拼凑更直观，尤其当列数随屏幕变化时。
别硬套 grid-template-columns: repeat(3, 1fr)——它在小屏下会强制三列，造成内容挤压。应该用 minmax() + auto-fit 动态计算列数。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 行间距用
row-gap，不是margin-bottom（后者破坏 Grid 流） - 单个卡片内部仍可用 Flex 垂直居中标题和按钮，Grid 管布局，Flex 管对齐
- IE11 不支持
auto-fit，需回退到固定列数 + 媒体查询
Flex 和 Grid 混用的合理边界在哪里
不是“选一个”，而是“谁管哪一层”。Grid 适合页面级大框架（比如整个 .container 划分区域），Flex 适合组件内部元素排列（比如一个卡片里的图标、标题、描述）。
反模式：用 Flex 嵌套多层来模拟网格——代码难维护，响应式 breakpoint 多了极易失控；或用 Grid 给每个按钮单独设 grid-area——过度设计，毫无必要。
- 页面骨架（header / sidebar / main / footer）→ 用 Grid 定义
grid-template-areas - 导航菜单项水平排列 → 用 Flex，
justify-content: space-between - 表单字段组（label + input + error）→ Flex 垂直对齐，比 Grid 简洁
- 绝对定位元素（如悬浮提示）不参与 Flex/Grid 流，需额外脱离文档流
调试时最常被忽略的两个 CSS 属性
布局出问题，90% 是因为没看清楚容器尺寸来源和子项行为约束。打开浏览器开发者工具后，优先检查这两项：
-
box-sizing：默认是content-box，padding 会让实际宽度超出设定值。全局重置为border-box能避免多数宽度错乱 -
align-items和justify-content的作用对象不同：前者控制交叉轴（Flex 中通常是垂直方向），后者控制主轴（通常是水平方向）。Grid 中二者行为一致，但初学者常混淆轴向
真正麻烦的不是语法，是容器是否真的“有高度”、子项是否被 white-space: nowrap 或 float 残留影响——这些细节不显眼，但一卡就是半天。
