Flex和Grid是互补而非替代关系：Grid用于二维宏观布局（如页面骨架），Flex用于一维微观对齐（如导航栏、居中）；混合使用时应遵循“宏观Grid+微观Flex”策略，避免同级嵌套混乱。
现代网页布局几乎不需要手写浮动或表格嵌套，display: flex 和 display: grid 足以覆盖 95% 的日常需求，关键是怎么选、怎么配、怎么避坑。
flex 布局什么时候该用 justify-content，什么时候该用 align-items
这两个属性控制的是不同轴向的对齐，混用容易错位。主轴方向由 flex-direction 决定：默认是 row（水平），此时 justify-content 控制左右，align-items 控制上下；设成 column 后角色互换。
- 水平居中 + 垂直居中：同时写
justify-content: center和align-items: center - 顶部对齐 + 左侧靠齐：用
justify-content: flex-start+align-items: flex-start，别误写成left或top（CSS里没这俩值） - 父容器没设高度时，
align-items: center可能无效——因为交叉轴没有约束，得加min-height: 100vh或明确高度
grid-template-columns 中 fr 单位和 % 单位的区别
fr 是比例单位，按剩余空间分配；% 是相对于容器宽度的固定比例，两者行为完全不同。
- 写
grid-template-columns: 1fr 2fr：两列按 1:2 分配父容器所有可用宽度（不含 padding） - 写
grid-template-columns: 33% 67%：两列严格按百分比切分，但若父容器有 padding 或 border，实际内容区变小，列宽会“缩水” - 混合使用风险高：比如
1fr 200px 1fr没问题，但50% 200px 50%会导致总宽超 100%，触发横向滚动条 - 响应式场景下，
fr更可靠；需要像素级控制时才用px或rem
语义化标签如 header、main 不加 CSS 就能布局吗
不能。header、main、aside 这些只是语义容器，浏览器默认把它们当 display: block 处理，和 div 行为一致——不会自动排成多栏，也不会自适应高度。
立即学习“前端免费学习笔记（深入）”；
- 必须配合 Flex 或 Grid 才能实现结构化布局，例如：
main { display: flex; }才会让子元素并排 - 单独写
<main><section>…</section><aside>…</aside></main>，没样式就是上下堆叠，不是左右分栏 - SEO 和可访问性受益于语义标签，但视觉效果完全依赖 CSS，别指望“写了就自动好看”
- 部分旧版 IE 对语义标签支持弱，需引入
document.createElementpolyfill，但 2026 年基本可忽略
真正卡住人的往往不是语法记不住，而是没意识到：Flex 和 Grid 是独立的布局模型，不能嵌套混用同一层级的逻辑；一个容器只能用一种 display 类型主导布局，嵌套时才切换。这点不厘清，调试会陷入死循环。
