慕课实战 - 前端内功修炼 ：5大主流布局系统进阶

如果你写页面时经常卡在"像素对不齐""换台设备就散架"，或者拿到设计稿后只能靠反复调 margin 试出来，这套内容针对的就是这个场景。它不教框架、不教工程化，主题很窄：CSS 布局本身。Flex、Grid、响应式这几套主流方案加上设计稿还原流程，构成全部内容。

它解决的到底是什么问题

日常开发里最耗时的往往不是业务逻辑，而是把设计稿变成能自适应、不出错的页面。很多人对 Flex 的认知停留在"能横排就行"，对 Grid 基本没系统用过，响应式靠媒体查询硬堆断点。这套资料把这几套布局系统拆开讲，重点放在每个属性在真实场景里怎么选、怎么组合，以及布局出问题时从哪一层去排查。另一块是还原流程：怎么读设计图的标注信息、怎么把标注转成可直接用的结构，减少手工测量的环节。

适合什么基础，先看哪几块

需要你已经能写 HTML 和基础 CSS，知道盒模型、display、定位是怎么回事。完全零基础的话，前几章会有点跟不上。建议的顺序是先看布局原理部分，把 Flex 的主轴交叉轴、对齐与换行机制过一遍，再进 Grid 的行列定义与区域划分；这两块是后面所有内容的地基。响应式放在中间偏后看，因为它是前两者的组合应用。设计稿还原那一章可以边看边开自己的工具跟着操作，单看视频收益有限。如果你已经熟练 Flex，只想补 Grid 和响应式，可以直接跳到对应章节，不影响理解。

学完能独立做什么，资料怎么配合练

比较现实的目标是：拿到一张中等复杂度的页面设计稿，你能自己判断该用 Flex 还是 Grid，能写出在常见屏幕宽度下都不错位的结构，不再依赖逐个像素去凑。再进一步，能处理多栏、卡片流、导航栏、表单这类高频布局，并在窄屏下给出合理的降级方案。练习建议按这个节奏：每看完一个布局系统，找一张现成的设计稿，只用刚学的方案实现一遍，写完再对照原稿检查偏差在哪；还原流程那部分，用自己手头的设计文件走一遍标注到编码的全过程，比跟着示例做更有效。资料里的视频和文档按章节顺序看即可，遇到讲工具的部分，先确认自己团队实际用的是哪套，用不上的可以跳过，不必强求全部看完。整体来说，这是一份偏基本功的资料，不承诺速成，但对长期写页面的人划算。