Flex适合一维布局（如导航栏、按钮内图标文字对齐），Grid适合二维页面结构（如header/main/sidebar/footer）；二者应按场景分工混用，避免Grid嵌套过深或误用justify-items。
Flex 和 Grid 到底该用哪个布局？
不是“哪个更好”，而是“谁更适合当前场景”。Flex 是一维布局，适合对齐、分配空间（比如导航栏、卡片列表、表单控件）；Grid 是二维布局，适合划分整体页面结构（比如 header / main / sidebar / footer 的网格区域）。混用很常见，但别用 Grid 去做按钮内图标+文字的对齐——display: flex 更轻量、语义更准。
- 用
flex处理组件内部子元素排列（如.button里icon和label） - 用
grid定义页面级容器（如.layout），再让子组件自己决定内部怎么排（可能是 flex，也可能是 block） - 避免嵌套多层
grid：三层以上容易失控，调试时grid-template-areas变得难以追踪
媒体查询写在哪？断点怎么设才不翻车？
媒体查询不是“最后加上的补丁”，而是响应式 CSS 的骨架。它应该和组件样式写在一起，而不是全堆在文件末尾。断点不是按设备尺寸硬编码，而是按内容撑开的临界点来设——比如一个卡片宽度超过 30em 就换行，那就用 @media (min-width: 30em)，而不是死记“768px 是平板”。
- 优先用
em或rem写断点，避免像素陷阱（用户缩放、高 DPI 屏幕下 px 断点会漂移） - 不要为“iPhone X”“iPad Pro”单独写断点，它们只是触发某个
min-width的载体而已 - 移动端优先：基础样式默认适配小屏，
@media (min-width: 48em)向上增强，而非从桌面版往下收缩
justify-content 和 justify-items 容易搞混？
它们名字像，作用域完全不同：justify-content 控制的是容器内**所有子项整体**在主轴上的分布（Flex 和 Grid 都有）；而 justify-items 是 Grid 专属，控制的是**每个子项自身**在单元格内的对齐方式（类似 Flex 里的 align-self，但作用对象是 grid item 而非整个容器）。
- Flex 容器里只有
justify-content和align-items，没有justify-items - Grid 容器中，
justify-items: center会让所有 grid item 在列方向居中；但若某个 item 想单独右对齐，就用justify-self: end - 别在 Flex 上误写
justify-items—— 浏览器会静默忽略，你查半天发现根本没生效
响应式图片和字体怎么跟 CSS 体系联动？
CSS 响应式不只是布局，还得管内容渲染的“质感”。图片用 srcset + sizes 是 HTML 层的事，但它的断点必须和 CSS 中的媒体查询一致；字体大小用 clamp() 能替代部分媒体查询，但要注意 fallback 和浏览器兼容性（IE 不支持，旧 Safari 需要 -webkit- 前缀）。
立即学习“前端免费学习笔记（深入）”；
-
font-size: clamp(1rem, 4vw, 1.5rem)是好用，但别滥用——段落正文适合，标题层级多时反而难控制节奏 - 图片的
sizes值（如"(max-width: 48em) 100vw, 50vw"）必须和 CSS 中对应容器的宽度逻辑匹配，否则会出现“CSS 说占半屏，HTML 却加载了全屏图” - 慎用
object-fit: cover配合响应式宽高比容器：它不会改变图片原始宽高比，只裁剪，容易切掉关键内容
真正难的不是写对某一行 grid-template-columns，而是让断点、字体、图片、容器、内容流在不同视口下保持视觉节奏一致。很多人卡在这儿，不是语法不会，是没把它们当成一个协同系统来看。
