在 CSS 布局的演进史中曾经历了table 时代→float 时代→position 时代的三次蜕变。每一次蜕变都解决了上一代的痛点却也带来新的理解成本。Flexbox 和 Grid 的出现才是真正意义上为布局而生的方案——它们不是技巧而是一套完整的布局模型。然而现实中大量工程师对两者的使用仍停留在会用不精的阶段display: flex配合justify-content: center走天下grid-template-columns只会repeat(3, 1fr)。本文的目标让你真正理解 Flex 和 Grid 的底层模型掌握何时用哪个、为什么这样用。目录一、先把思维模型建对1.1 Flex一维流解决排列问题 1.2 Grid二维网格解决区域划分问题1.3 黄金选择法则二、Flexbox 进阶你可能没真正理解的部分2.1 flex 三值的真正含义 2.2 flex-shrink 的收缩计算2.3 常被忽视的对齐轴 2.4 一个经典实战顶满剩余空间的侧边栏三、CSS Grid 进阶真正用好它3.1 理解网格线是核心 3.2 fr 单位弹性比例分配3.3 命名区域让布局结构一目了然 3.4 auto-fit vs auto-fill 的区别3.5 Grid 中的隐式网格四、Flex vs Grid 的深层差异五、工程实践建议5.1 不要害怕嵌套 5.2 用 gap 替代 margin5.3 调试技巧善用浏览器 DevTools一、先把思维模型建对1.1 Flex一维流解决排列问题Flexbox 的核心是一条轴线。容器沿主轴main axis排列子项沿交叉轴cross axis对齐它们。思维模型你是一个工厂流水线子项依次从一端送入你控制子项之间的间距justify-content每个子项横向的膨胀/收缩比例flex-grow/flex-shrink换行策略flex-wrapFlex 擅长解决的问题一组元素横向/纵向排列某个子项占满剩余空间子项垂直居中1.2 Grid二维网格解决区域划分问题Grid 是真正的二维布局。你先定义画布上的网格线再把元素放进格子里。思维模型你是一个版式设计师先画出行列框架再往格子里填内容。Grid 擅长解决的问题整页/区块的宏观布局侧边栏 主内容 页眉页脚卡片瀑布流、等分网格元素跨行/跨列放置1.3 黄金选择法则场景推荐方案理由导航栏、工具栏Flex一维排列弹性伸缩表单字段组Flex标签 输入框对齐整体页面骨架Grid二维区域划分卡片列表Grid等分且自适应复杂卡片内部Flex内容排列、间距控制全屏轮播Grid / Flex 均可视具体结构选择记住Flex 和 Grid 不是互斥的真实项目里大量场景是Grid 做外层框架 Flex 做内部排列。二、Flexbox 进阶你可能没真正理解的部分2.1flex三值的真正含义大多数人只记得flex: 1却不知道它等于flex: 1 1 0这三个值分别是flex-grow剩余空间的占比分配flex-shrink空间不足时的收缩比flex-basis主轴上的初始尺寸优先级高于widthflex-basis: 0vsflex-basis: auto的区别是关键css复制/* 两个子项内容分别是短和这是一段很长的文字 */ /* 方案Aflex: 1 → flex: 1 1 0 */ .item { flex: 1; } /* 两项完全等宽不管内容多少 */ /* 方案Bflex: 1 1 auto */ .item { flex: 1 1 auto; } /* 先按内容撑开再等比分配剩余空间内容长的更宽 */选哪个做等宽分栏用flex: 1做内容自适应分栏用flex: 1 1 auto。2.2flex-shrink的收缩计算容器 600px子项 A300pxshrink2 子项 B300pxshrink1总宽超出 100px收缩权重 shrink × flex-basis A权重 2 × 300 600 B权重 1 × 300 300 总权重 900 A收缩 100 × 600/900 ≈ 67px → 最终 233px B收缩 100 × 300/900 ≈ 33px → 最终 267px这就是为什么你设置了flex-shrink: 0就能防止某个子项被压缩比如 logo 图片。2.3 常被忽视的对齐轴很多人混淆align-items和align-contentalign-items控制单行内子项在交叉轴上的对齐align-content控制多行之间的间距仅在flex-wrap: wrap且有多行时生效典型陷阱多行 Flex 布局设了align-items: center却没居中——原因是align-content默认为stretch每行高度已被撑满align-items在已满的行内居中视觉上无效果。2.4 一个经典实战顶满剩余空间的侧边栏css复制.layout { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; /* 不被压缩 */ } .main { flex: 1; /* 占满剩余宽度 */ overflow: auto; }关键点flex-shrink: 0保护 sidebar 不变形flex: 1让 main 自动填满两行代码胜过任何floatclearfix方案。三、CSS Grid 进阶真正用好它3.1 理解网格线是核心Grid 的一切都建立在线上而不是格子。一个 3 列的网格有4 条列线编号 14或从右往左 -1-4。css复制.grid { display: grid; grid-template-columns: 200px 1fr 2fr; /* 列线1 列线2 列线3 列线4 */ } /* 子项从第1条线跨到第3条线占前两列*/ .item-wide { grid-column: 1 / 3; } /* 用负数从末尾计数跨到最后一条线 */ .item-full { grid-column: 1 / -1; }掌握线的概念才能真正控制元素位置。3.2fr单位弹性比例分配frfraction是 Grid 专有单位代表剩余空间的份额css复制/* 三列固定 200px 剩余空间的1/3 剩余空间的2/3 */ grid-template-columns: 200px 1fr 2fr; /* 等分三列最常用*/ grid-template-columns: repeat(3, 1fr); /* 自适应列数每列最小 200px最大 1fr */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));最后一行是响应式卡片布局的利器——无需媒体查询浏览器宽了自动多列窄了自动少列。3.3 命名区域让布局结构一目了然css复制.page { display: grid; grid-template-areas: header header sidebar main footer footer; grid-template-columns: 240px 1fr; grid-template-rows: 60px 1fr 50px; min-height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }这是 Grid 最强的能力之一布局结构写在 CSS 里HTML 不需要嵌套层级。视觉和代码结构高度吻合维护成本极低。3.4auto-fitvsauto-fill的区别这是面试高频题也是真实项目的痛点auto-fill即使列容不下内容也会保留空白列占位auto-fit多余的空列会折叠成 0 宽度现有列填满容器css复制/* 只有2个卡片时 */ /* auto-fill: 生成多个空列2个卡片靠左右边留白 */ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* auto-fit: 空列折叠2个卡片各占1fr平分容器 */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));结论卡片列表用auto-fit需要固定列数占位用auto-fill。3.5 Grid 中的隐式网格只定义了 3 列但子项有 10 个——超出部分进入隐式网格行高由grid-auto-rows控制css复制.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; /* 隐式行高固定 200px */ /* 或者 */ grid-auto-rows: minmax(100px, auto); /* 最小100px内容多时自动撑高 */ }不设置grid-auto-rows的话行高由内容决定可能出现高度参差不齐的情况。四、Flex vs Grid 的深层差异一句话总结两者的本质区别Flex 是内容驱动的子项决定空间分配Grid 是容器驱动的容器决定格子大小子项填进去。这个区别影响的是你写代码时的思考起点用 Flex先想我有几个子项它们怎么排列用 Grid先想整体空间怎么划分然后往里填内容实际上很多布局既能用 Flex 也能用 Grid 实现但思路不同维护性也不同。一般来说维度FlexGrid适合的布局维度一维二维布局控制权子项容器响应式灵活度依赖媒体查询auto-fit/fill原生支持对齐精度轴向对齐精确到格子学习曲线中较高浏览器支持极好好IE 需 autoprefixer五、工程实践建议5.1 不要害怕嵌套Grid 里嵌套 Flex、Flex 里嵌套 Grid 完全合理这不是滥用而是让每层布局用最适合的工具。css复制/* 外层Grid 定义页面骨架 */ .page { display: grid; grid-template-areas: ...; } /* 卡片内部Flex 处理内容排列 */ .card { display: flex; flex-direction: column; justify-content: space-between; }5.2 用 gap 替代 margingap原grid-gap在 Flex 和 Grid 中都可用且不会在首尾产生多余间距比margin更干净css复制/* ✗ 旧做法每个子项都有右边距最后一个要用 :last-child 去掉 */ .item { margin-right: 16px; } .item:last-child { margin-right: 0; } /* ✓ 新做法只在项之间产生间距 */ .container { display: flex; gap: 16px; }5.3 调试技巧善用浏览器 DevToolsChrome/Firefox 的 DevTools 对 Grid 和 Flex 都有专用可视化面板Grid在 Elements 面板点击grid标签可高亮显示所有网格线、区域名称Flex选中 flex 容器点击旁边的弹性盒图标可实时调整对齐属性这是真正理解布局计算的最快方式比盯着代码想象要快 10 倍。六、总结Flex 和 Grid 并不是替代关系而是互补的布局工具。掌握它们的关键不是记住所有属性而是建立正确的思维模型Flex你在管理一条流水线控制子项在一个方向上的排列和弹性Grid你在设计一张版面先定框架再填内容现代 CSS 布局的最佳实践是Grid 做宏观结构Flex 做微观排列gap代替 marginauto-fitminmax做响应式。掌握这四条原则80% 的布局需求都能优雅解决。如果你觉得本文有帮助欢迎点赞收藏评论区聊聊你在实际项目中遇到的 Flex/Grid 坑一起交流~