CSS布局完全指南：从Flexbox到Grid，一套代码适配所有屏幕

CSS布局完全指南：从Flexbox到Grid，一套代码适配所有屏幕

布局是前端开发的基石。一个页面好不好看，60%取决于布局。我见过很多前端新手，JavaScript写得很溜，但一个居中都搞不定。今天从Flexbox到Grid，把布局这件事彻底讲清楚。

Flexbox：一维布局之王

Flexbox解决的是在一个方向上的排列问题。不管是水平排列导航菜单还是垂直排列列表项，Flexbox都是最直观的选择。

先记住三个核心属性。容器上设置display为flex，子元素默认水平排列。justify-content控制主轴方向的对齐方式，center居中对齐、space-between两端对齐、space-around均匀分布。align-items控制交叉轴方向的对齐方式，center垂直居中、stretch拉伸填满。

做一个导航栏只需要几行CSS。父容器display flex加justify-content space-between让品牌和菜单项分居两侧，子项的margin-left auto可以把最后一个元素推到最右边。就这么简单。

Grid：二维布局的终极方案

当你需要同时控制行和列的时候，Flexbox就不够用了。这时候Grid才是正确的选择。

Grid的核心是先把页面划分成网格，再把内容放进对应的格子。grid-template-columns定义列数，grid-template-rows定义行数，gap控制间距。

一个常见的新闻卡片布局：三列等宽网格，grid-template-columns repeat三列一fr。每张卡片自动填充到对应的网格单元格中。配合媒体查询，在手机上切换成两列或单列，一行代码都不用改HTML结构。

Flexbox还是Grid

很多人纠结该学哪个。答案是两个都要学，用在不同的场景。一维排列用Flexbox，二维布局用Grid。导航栏标签栏用Flexbox，页面整体布局图片画廊用Grid。

还有一个实用的组合用法：Grid做整体布局，每个网格内部用Flexbox做内容排列。比如Grid分成左侧边栏和右侧主区域，右侧主区域内部再用Flexbox排列标题和内容。两种技术不冲突，它们是最好的搭档。

响应式断点设置

一套代码适配所有屏幕的关键在于合理的断点设置。不需要为每个设备尺寸都设断点，三个断点就能覆盖绝大多数场景。大屏超过1024像素用三列布局，中屏在768到1024像素之间用两列布局，小屏低于768像素用单列布局。

断点的选择应该以内容为基准，而不是以设备为基准。当内容在一行中变得太挤或者太松的时候，就是切换布局的最佳时机。

实战技巧

垂直居中是一个经典难题。用Flexbox的话，容器设置display flex、align-items center、justify-content center，不管内容多高多宽都能完美居中。用Grid的话同样简单，父容器display grid加place-items center一步到位。

和Flexbox相关的还有一个常见需求是固定底部 footer。页面内容不够高时footer贴在底部，内容超出时footer跟随滚动。解决方案是用Flexbox让主体内容区域flex为1，footer自然被推到最下面。

写在最后

CSS布局的学习曲线是先难后易的。Flexbox和Grid刚接触时会觉得属性太多记不住，但用过两三个项目之后就会变成肌肉记忆。最好的学习方式不是背属性，而是直接抄一个你喜欢的页面布局。打开浏览器的开发者工具，看看别人是怎么用Flexbox和Grid的，然后自己动手实现一遍。