前端补课:Flex 与 Grid 布局的一次系统梳理
Words: 814Read Time: 3 minLast edited: 2026-8-4
后端为什么也要补布局
作为一个写 C# 的,我以前对 CSS 的态度是「能用就行」:从模板里抄一套,间距不对就 margin 硬调,调不动就上
!important。直到自己折腾博客主题,改一个卡片列表改到崩溃,才意识到布局这块欠的课迟早要补。Flex 和 Grid 是现代 CSS 布局的两个主角,我把它们系统过了一遍,这篇就是我的笔记。Flex:一维布局
Flex 的核心思想是「一条轴」:容器里的子元素沿着主轴(默认水平)排列,剩下的事情就是分配空间和对齐。
容器上最常用的三个属性:
justify-content:主轴方向的对齐,space-between两端对齐,center居中。
align-items:交叉轴方向的对齐,垂直居中基本就靠align-items: center。
gap:子元素之间的间距,别再给每个子元素单独写 margin 了。
子元素上最重要的是
flex 属性,它是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。flex: 1 表示「剩余空间大家平分」,flex: 0 0 200px 表示「固定 200px,不伸不缩」,侧边栏经常这么写。Grid:二维布局
Grid 的思路是「先画格子再放东西」,行列同时可控,适合整体页面骨架:
grid-template-columns:定义列,1fr 2fr 1fr表示三列按 1:2:1 分配宽度。
fr单位:剩余空间的比例,比百分比好算得多。
gap:行距列距一把搞定。
同一个三栏布局,两种写法
需求:左右两栏固定 200px,中间内容区自适应。Flex 版本的 HTML:
Grid 版本,HTML 结构完全一样,CSS 只要四行:
我踩过的坑
坑一:Flex 子元素被内容撑爆。 中间栏如果有一段长文本或者
pre 代码块,会把整个布局顶宽,左右栏被挤变形。原因是 flex 子元素默认 min-width: auto,不肯缩到内容宽度以下。解法就是上面那行 min-width: 0;Grid 里对应的做法是把列宽写成 minmax(0, 1fr)。这个坑我排查了一晚上,印象极深。坑二:别让 Flex 干 Grid 的活。 我以前用 Flex 加
flex-wrap 模拟九宫格,间距在最后一行永远对不齐,越调越乱。卡片网格、整体页面骨架这种明显的二维场景,直接上 Grid,别跟自己过不去。我的取舍
一句话总结:一维用 Flex,二维用 Grid。导航栏、工具条、表单里的行内排列用 Flex;页面骨架、卡片矩阵用 Grid。两者不冲突,实际项目里都是混着用——Grid 定骨架,Flex 排内部。
Loading...