CSS布局从Flexbox到Grid

CSS布局从Flexbox到Grid：别再只会“横着排”了

你是不是也经历过这样的场景：页面写完，老板突然说“把这几行卡片改成三列，居中对齐，手机上还要能自动堆叠”。于是你打开编辑器，熟练地写下display: flex，然后开始跟flex-wrap、justify-content、align-items搏斗。半小时后，布局是出来了，可你自己都说不清为什么多加了一个min-width才没溢出。这时候你大概会想：CSS就不能“说人话”一点吗？

其实很多人的前端路，都是被Flexbox“带偏”的。早年做页面，最怕的就是垂直居中。那时候的我们，靠position: absolute加负margin硬算，像在解一道没有答案的数学题。后来Flexbox来了，简直像开了挂。只用两行代码，元素就能乖乖上下左右排好。比如导航栏：display: flex; justify-content: space-between，菜单自动拉开间距，不用再算宽度。可问题也慢慢冒出来——Flexbox本质是一维布局，它擅长“排成一条线”，一旦要处理二维交叉，比如既要分行又要分列，代码就开始“叠buff”：外层一个Flex，内层再来一个，嵌套一多，脑子先乱了。

我见过一个后台管理页，侧边栏和内容区用Flex撑开，看起来没问题。直到有一天，产品要求内容区里再塞一个“卡片瀑布”，还要自适应列数。于是开发加了又加：外层Flex控制主结构，内层Flex控制换行，再配一堆flex-basis和媒体查询。结果手机上一跑，有的卡片被压扁，有的直接掉到下一行留白严重。调试半天发现，其实是Flex在“尽力而为”，而不是“按规则来”。它太在意“这条线上的空间怎么分”，却不太管“整个平面该怎么切”。

再来一个常见坑：表单。曾经做一个搜索页，输入框和按钮并排，Flex轻松搞定。可需求一变，要在按钮旁边再加一个“高级选项”按钮，还得在不同屏幕下变换顺序。于是order属性上场，数字越写越多。后来换个思路用Grid，只在容器上写一句grid-template-columns: 1fr auto auto，三列自动对齐，换顺序只需要改模板，不用动子元素的“排队号”。那一刻我才意识到，Flex像是一群人在排队，有条有理，但一旦要排成方阵，就得一层层重新排队；Grid则像画格子，先把地盘划好，东西放进去就行。

还有一个让我印象很深的案例，是做文章详情页。顶部标题、作者、时间要水平排；下面正文配图，图文要交错出现。以前用Flex，得把内容拆成多个容器，再用flex-direction换来换去，媒体查询写得像补丁。后来用Grid，直接定义一个12列模板，标题跨8列，侧边信息跨4列，正文段落放正文区，图片放图片区。屏幕小的时候，一句grid-template-columns: 1fr，所有区块自动堆叠，顺序不乱，间距还在。代码量少了一半，后续维护也不再心惊胆战。

当然，Flexbox并没有“过时”。它在一维场景里依然高效。比如一排标签、一组按钮、水平滚动的列表，Flex的gap、wrap、align-self依然顺手。真正要改变的是思路：不要把Flex当成“万能布局器”，而要把它当成“排线工具”；Grid才是处理整体页面结构的“画板”。两个并不对立，而是分工合作——外层Grid定结构，内层Flex排细节，配合起来才叫舒服。

从Flexbox到Grid，其实是从“应付布局”到“理解空间”的转变。CSS这些年一直在补同一个课：布局不该靠巧合，而该靠规则。Grid带来的不只是新属性，更是一种把页面当成整体来规划的能力。它让我们敢于把设计稿切得更碎，也敢于让代码更干净。如果你还在为嵌套Flex头秃，不妨试试把容器改成Grid，也许你会发现，原来CSS可以这么简单。