前端补课: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-growflex-shrinkflex-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...
© 2024 - 2026 ihuadz
中文