1. 先搞明白Flex 和 Grid 到底在解决什么不同的问题很多人学布局时最大的困惑不是学不会语法而是不知道什么时候该用哪个。我在排查项目里那些“越改越乱”的样式时发现一个规律大部分难维护的布局都是因为用错了工具。比如把整个页面当成一个巨大的 Flex 容器在里层又套了三四层 flex最后想改一列宽度时根本找不到该改谁。1.1 一句话判断管一排用 Flex管一片用 GridFlex 的完整名字是 Flexible Box它的核心能力是处理“一维排列”——不管是横着排一排还是竖着排一列它关心的是怎么把这一串东西排整齐、怎么分剩余空间、怎么在空间不足时伸缩。你可以把 Flex 理解成整理一条队伍队伍里的人高矮胖瘦不一你要决定谁往前站、谁可以缩、谁必须保持原样。Grid 的完整名字是 Grid Layout它的核心能力是处理“二维网格”——同时管理行和列。它像在一张表格里摆放东西你可以精确地指定某个元素从第几行第几列开始跨几行几列。更适合描述“整个页面的骨架”“卡片墙”“仪表盘”这类需要同时考虑横纵两个方向的场景。用错了最典型的症状是用 Flex 做整体页面布局结果发现某个区域想跨两行时非常别扭只能靠嵌套和绝对定位硬凑。反过来用 Grid 去排一个简单的按钮组写了五行grid-template-columns还没排好最后发现其实一个display: flex; gap: 8px就完事了。1.2 轴、轨道和方向理解两种布局的底层差异Flex 的世界里有两个关键概念主轴main axis和交叉轴cross axis。flex-direction: row时主轴是水平方向交叉轴是垂直方向改成column时两者互换。所有对齐属性都是围绕这两条轴展开的justify-content管主轴align-items管交叉轴。这个区分看似简单实际排错时最容易栽跟头后面我会专门讲。Grid 的世界里没有“主轴”这个概念取而代之的是行轨道row track和列轨道column track。你用grid-template-columns定义每列的宽度用grid-template-rows定义每行的高度。子元素通过grid-column和grid-row决定自己落在哪条轨道上。这种表达能力让 Grid 天然适合做区域规划比如一个典型后台布局.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 64px 1fr 48px; grid-template-areas: header header sidebar main footer footer; height: 100vh; }这种写法里header 跨两列footer 跨两列中间一列侧边栏、一列内容区。换成 Flex 实现同样效果你需要给 header 和 footer 设置flex-basis: 100%再让中间区域单独成为一个 flex 容器代码复杂度和可读性都会直线下降。1.3 实际开发里最常见的错误认知我见过不少同事把“Flex 能实现一切”当作信条也确实能用 Flex 拼出各种布局。但问题在于当需求从“一排按钮”变成“左侧列表、右侧详情、底部操作栏”时Flex 方案需要不断叠加嵌套、修改flex-basis、处理换行维护成本指数上升。反过来Grid 也不是万能的——如果需要处理的是“一排等分按钮”“面包屑导航”“横向滚动标签”Grid 写起来反而绕远路。这两个工具的关系更像是互补而不是替代Grid 负责宏观的区块规划Flex 负责区块内部的条状排列。这应该成为你写布局时的默认思路。2. Flex 的尺寸计算flex:1 为什么总是差那么一点如果你在浏览器里写下display: flex然后给某个子项设置flex: 1有时会发现它并没有完美填满剩余空间右侧总留了一条几像素的缝隙。这个问题在热词搜索里出现过不止一次。要理解它必须先拆开flex: 1这个简写背后的三个属性。2.1 flex-grow、flex-shrink、flex-basis 的真实关系flex: 1其实是flex: 1 1 0%的简写它做了三件事允许放大grow、允许缩小shrink、把基础尺寸设为 0%。但很多人平时写的是flex: 1却不知道flex: 1 1 auto和flex: 1 1 0%是有本质区别的这在特定场景下会造成完全不同的结果。flex-basis是子项在“分配剩余空间之前”的初始尺寸。auto意味着初始尺寸来自width属性或内容自身的尺寸0%则意味着所有子项从零开始完全靠剩余空间分配来撑出宽度。看一个例子.container { display: flex; width: 600px; } .item-a { flex: 1 1 auto; } .item-b { flex: 1 1 auto; } .item-c { flex: 1 1 auto; }如果 a 里面有很长的一段文字b 和 c 只有短词auto会让 a 先按内容宽度占位然后剩余空间再三等分。最终结果是 a 比 b、c 宽因为它的“基础尺寸”更大。而如果三个子项都用flex: 1即0%它们会从同一起跑线开始最终三个宽度完全相等。2.2 “还剩一点宽度”的三个隐藏元凶第一种是min-width: auto。Flex 子项的默认min-width不是 0而是auto意思是“不能小于内容的最小宽度”。当一个子项里有一段不换行的长单词或图片时它拒绝被压缩到内容宽度以下于是出现了“flex 分配了空间但实际没有填满”的错觉。解决办法是给子项设置min-width: 0让它允许被压缩。第二种是 box-sizing 带来的累加问题。默认box-sizing: content-box时flex-basis计算的是内容盒的尺寸padding 和 border 会额外加上去。你设计了flex: 1的三个子项每个还带了 16px 的 padding总宽度就可能超出容器最终一行放不下触发收缩或溢出。第三种是容器自身的宽度计算。如果父容器设置了width: 100%但父父容器有 padding那么实际可用宽度比100%要少子项flex: 1分配完后看起来就“差了几像素”。这种问题用全局box-sizing: border-box能消除大半。2.3 处理方案从源头上避免幽灵空隙我的做法是给项目写全局样式时统一声明*, *::before, *::after { box-sizing: border-box; }然后在需要弹性压缩的子项上习惯性加上min-width: 0。这两个动作能解决绝大多数“差一点宽度”的问题。另外子项之间的间距用gap而不是外部margin因为gap不会参与flex-basis的计算分配剩余空间时更可预测。.row { display: flex; gap: 12px; } .row .cell { flex: 1; min-width: 0; }这段代码在多列卡片场景里非常稳定不会再出现“最后一列莫名被挤到下一行”或“右侧几条像素的空隙”的情况。2.4 flex-wrap 不生效往往不是 wrap 的锅热词里有“flex 超出换行”常见的做法是加flex-wrap: wrap。但如果你加了之后仍然不换行先检查两个地方一是子项是否有flex-shrink: 0或非常宽的min-width比如图片设了width: 400px; min-width: 400px容器宽度只有 300px 时即使 wrap 也无法换行因为它撑破了容器二是容器本身宽度是否受限如果容器宽度是auto且被内容撑开子项永远觉得空间够用也就不会换行。Grid 的fr单位同样有类似陷阱。grid-template-columns: 1fr 1fr并不等于两个等宽列当某一列里有长内容时fr会优先保证内容不被裁剪导致另一列宽度失衡。要强制等分需要写minmax(0, 1fr).grid-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }这个写法的底层逻辑和min-width: 0完全一致——允许子项收缩到 0 以下的最小尺寸而不是被内容拖住。我在后面讲 Grid 时会再展开。3. Grid 的排布逻辑轨道、区域和自动填充Grid 的入门门槛比 Flex 略高因为它引入了轨道、区域、命名网格线这些概念。但一旦你理解它的排布逻辑就会发现表达复杂布局反而比 Flex 直观得多。这一节我只讲实战中真正高频的用法并指出几个容易踩的坑。3.1 用轨道定义控制网格骨架最基本的 Grid 布局是通过列轨道和行轨道来定义的.dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }repeat(12, ...)表示重复 12 次非常适合做 12 栅格体系。每个子项可以自由指定跨几列.chart-wide { grid-column: span 8; } .chart-narrow { grid-column: span 4; }这里有一个新手容易困惑的地方grid-column: span 4表示这个元素占 4 列轨道但它默认是从“第一个能放下的位置”开始排。如果前面的元素占用了位置它会自动往后挪这个过程叫自动放置算法。绝大多数时候自动放置已经够用只有当你需要精确控制元素位置时才需要显式写grid-column-start和grid-column-end。minmax函数是处理复杂网格的关键。minmax(200px, 1fr)表示列宽最少 200px最多 1fr。minmax(0, 1fr)则是让列宽可以在 0 到 1fr 之间伸缩允许被压缩到任意小这样能避免长内容把网格撑出 1fr 的预期范围。3.2 grid-template-areas让布局结构一眼可见命名区域是 Grid 最优雅的特性之一。你可以给每个区域起名字然后在子元素里用grid-area引用.page { display: grid; grid-template-columns: 240px 1fr; grid-template-areas: sidebar header sidebar content sidebar footer; grid-template-rows: 72px 1fr 48px; height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; overflow: auto; } .footer { grid-area: footer; }这段代码的可读性极高任何人看到grid-template-areas里的 ASCII 风格布局就能立刻理解页面的结构。相比 Flex 方案里层层嵌套的容器这种写法的维护性要好很多。使用命名区域时有几个限制每个区域必须形成矩形不能出现 L 形或 T 形grid-area名称不能在多处重复定义除非你想让多个元素重叠到同一区域那就需要配合定位使用我后面会提到。如果你需要某个元素跨两行但保持区域命名清晰可以让区域名称在模板里出现两行再让子元素只写一次grid-area。3.3 隐式轨道与 grid-auto-flow溢出问题的来源当你定义的显式轨道不够用时Grid 会自动创建隐式轨道。比如你定义了grid-template-columns: 1fr 1fr但放入了第 5 个子项它会被放进第二行的第一个列轨道里这一行的行高默认是auto也就是由内容决定。很多“grid 子项突然挤成一团”的问题根源就是行高没有被控制。解决办法是给隐式轨道设定明确的尺寸.grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(120px, auto); }grid-auto-rows: minmax(120px, auto)保证了隐式行最少 120px同时允许根据内容扩展。grid-auto-flow: dense则会让后续元素回填前面留下的空洞适合做瀑布流或图片墙但使用时要注意这会改变元素的视觉顺序和文档流顺序不一致容易让屏幕阅读器用户困惑不建议在表单类页面里用。3.4 多个 Grid 容器之间的协作热词里有个“grid 多个”很多人以为是在一个容器里重复定义多个 grid其实真实场景更多是“页面上有多个独立 grid 区域各自内部又是一套 grid”。比如数据大屏里顶部一行放三个图表中部一行放两个大图表每个图表内部又有自己的网格。这时候不要把整个页面塞进一个 grid而是把页面拆成几个 grid 容器外层用 Grid 管大区块里层各自用 Grid 管内部排布。3.5 一个容易忽略的点Grid 子项的默认 stretchGrid 子项的默认对齐方式是stretch也就是说如果你不给它设置高度或宽度它会自动被拉伸填满所在网格区域。这个特性在 Flex 里也类似但 Grid 里更明显——因为网格轨道有明确尺寸子项默认就会铺满。如果卡片内部想要垂直居中内容不要直接调整卡片本身而是让卡片内部再包一层 flex 容器来处理。很多“卡片内容为什么顶到左上角”的问题就是因为没意识到默认对齐是 stretch 而不是 start。4. 对齐那些坑为什么 align-items: center 看起来还是不对齐对齐是布局里最磨人的部分。热词里有“为什么flex align center还是会不对齐”“布局重叠”等问题这些都是我在实际开发中反复遇到的。这一节专门讲对齐把 Flex 和 Grid 放到一起对比因为这些坑在两个体系里是相通的。4.1 Flex 的主轴交叉轴和 Grid 的行轴列轴Flex 里最常见的错误是混淆主轴和交叉轴。justify-content永远作用于主轴align-items永远作用于交叉轴。当flex-direction: row时justify-content: center是水平居中当flex-direction: column时justify-content: center变成了垂直居中。两者互换之后很多人就会疑惑“为什么我设置了 align-items: center 却没用”。Grid 里也有两套对齐属性justify-items和justify-content作用于行轴水平方向align-items和align-content作用于列轴垂直方向。这里的justify-items是控制网格子项在自己的网格区域内水平怎么对齐的justify-content是控制整个网格在容器里水平怎么对齐的。两者不能混用否则会出现容器很大、网格内容却挤在角落的情况。4.2 margin: auto 才是最可靠的对齐武器当justify-content和align-items各种不生效时margin: auto往往能一招制敌。在 Flex 容器里子项的margin: auto会吃掉该方向上的所有剩余空间。在 Grid 里同样适用——你能写出这种代码.grid-modal { display: grid; place-items: center; /* 这是 justify-items 和 align-items 的简写 */ }但如果你有一个弹性内容又想在某个方向上自由控制位置margin-left: auto这样的写法比justify-self更灵活。一个常见的应用场景是卡片左下角放操作按钮组按钮组内部用 flex 排列但按钮组整体推到右侧直接在按钮组上写margin-left: auto即可根本不需要改父容器的对齐方式。4.3 baseline 对齐图标加文字按钮的真实问题很多“看起来不对齐”的场景其实是因为默认对齐方式不是你以为的“中线对齐”。一个典型的例子是图标加文字按钮button classbtn svg classicon .../svg 保存 /button如果按钮设置了display: inline-flex; align-items: center图标和文字理论上应该垂直居中。但实际渲染时SVG 的默认尺寸和文字的基线baseline不重合尤其当图标本身带了上下留白时肉眼看起来整体偏上或偏下。解决思路有两个要么给 SVG 设置固定尺寸并加上display: block去掉内联元素的幽灵间隙要么改用align-items: baseline配合align-self微调。Flex 容器默认的align-items是stretch不是center这也是新手常踩的坑——设置了align-items: center结果没效果先检查一下是不是有个子项设置了align-self: stretch把它覆盖了。4.4 父容器高度缺失导致的“对齐失效”align-items: center让子项在交叉轴上居中但这个“交叉轴”必须在父容器里有明确的尺寸才有意义。如果父容器高度是auto由内容撑开那么子项无论怎么居中都是贴着顶部——因为剩余空间是 0没有可分配的高度。这事儿的常见场景是一个卡片内部有标题和描述你希望标题和描述垂直居中但卡片高度由内容决定于是设置align-items: center后发现没有任何变化。正确做法是给卡片一个明确的高度比如min-height: 160px或者让卡片成为 Flex 容器且设定固定高度。Grid 里同理要让子项在网格区域内居中前提是网格行轨道有足够的高度。4.5 布局重叠不是玄学是对齐和定位的合谋热词里有“布局重叠”有时候是 Grid 的子项在自动放置时被排到了同一行导致相互覆盖有时候是grid-row: 1 / 2这种显式跨轨道写法和grid-auto-flow冲突。处理重叠的第一步是打开 DevTools 的 Grid Overlay把网格轨道可视化出来看看元素到底落在了哪个格子。如果确实需要重叠可以刻意利用 Grid 区域的重叠能力比如在同一个网格单元格里放多个子项.badge-wrap { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .badge-wrap .content { grid-area: 1 / 1; } .badge-wrap .badge { grid-area: 1 / 1; justify-self: end; align-self: start; }这样content和badge会共享同一个网格区域角标可以精确地悬浮在内容右上角不需要用绝对定位去猜坐标。这种做法的好处是父容器尺寸变化时角标仍然跟随网格区域自动调整比position: absolute更稳。5. 混排实战先画结构再写代码前面讲了 Flex 和 Grid 各自的原理这一节把它们组合起来看一个真实页面怎么从零到一落地。我在实际项目中总结了一套“先画结构再写代码”的流程能显著减少返工。5.1 页面骨架的拆解顺序拿到设计稿我的第一反应不是写 CSS而是在纸上画一个结构图。先画最大的区块头部、内容区、底部。内容区再拆成侧边栏和主区域。主区域再细分成卡片网格。每个区块内部如果是一排元素就用 Flex 画一个横向虚线框如果是网格就用方格虚线框。以典型后台页面为例最终结构是外层display: grid头部跨两列侧边栏 240px主区域占剩余空间底部跨两列。侧边栏内部display: flex; flex-direction: column导航条目竖排底部版本号用margin-top: auto推到底部。主区域内部display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))卡片自动填充排列。每张卡片内部display: flex; flex-direction: column标题、描述、操作区操作区用margin-top: auto贴底。5.2 导航、标签页、按钮组这种“一排东西”用 Flex页面的交互性组件像导航栏、Tab 切换、按钮组、标签列表都属于“一排东西”。它们的特点是数量可变化、宽度自适应、间隙统一正好是 Flex 的舒适区.nav { display: flex; align-items: center; gap: 8px; } .nav .spacer { margin-left: auto; }margin-left: auto把后面的内容推到右侧这是 Flex 布局里非常经典的分隔技巧比绝对定位干净得多。5.3 卡片墙、数据面板这种“一片区域”用 Grid当页面上有一组尺寸相近的卡片时Grid 的auto-fill和auto-fit是最强的响应式工具。两者的区别经常让人困惑auto-fill会尽量创建尽可能多的轨道即使空出来也不折叠。auto-fit会把空轨道折叠掉让已有卡片拉伸铺满容器。.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }这段代码的意思是每列最小 280px如果容器够宽就创建多条轨道并且自动拉伸填满。窗口变窄时轨道数减少卡片自动换行完全不需要媒体查询。需要注意的是auto-fit和minmax配合时如果只有一张卡片它会被拉伸到整行宽度这在某些设计中可能不是你想要的效果可以考虑用auto-fill让卡片保持更接近内容的宽度。5.4 Flex 负责内部细节Grid 负责整体稳定混排的核心原则是网格负责稳定Flex 负责流动。页面骨架用 Grid 写可以保证不管内容怎么变化区块位置不动区块内部的排列用 Flex 写可以灵活应对内容长度、数量变化。举一个具体例子。一个数据卡片标题在左上角数值在中间底部右侧有一个“查看详情”链接。卡片的整体位置由外层 Grid 的自动放置算法决定卡片内部用 Flex 垂直排列.card { display: flex; flex-direction: column; padding: 16px; min-height: 160px; } .card .value { font-size: 28px; font-weight: 700; margin: 16px 0; } .card .action { margin-top: auto; align-self: flex-end; }margin-top: auto让链接永远贴在卡片底部即使上方内容变多或变少。这是 Flex 在内部细节上最强大的能力之一。5.5 布局重叠的高级形态Grid 区域内的悬浮元素前面提到 Grid 可以共享网格区域这在组件开发里能替代很多绝对定位的写法。比如一个带角标的“通知”图标.notification { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 48px; height: 48px; position: relative; } .notification .bell { grid-area: 1 / 1; align-self: center; justify-self: center; } .notification .dot { grid-area: 1 / 1; align-self: start; justify-self: end; width: 10px; height: 10px; border-radius: 50%; background: #e34d59; }这样角标始终贴着图标的右上角不需要关心图标内部漂不漂。把这个模式推广到更多场景比如卡片上的“精选”标签、头像上的在线状态点都能用同样的写法维护成本很低。6. 遇到布局问题时的系统排查链路这一节总结我的排查思路。布局问题看起来很随机实际遵循一套固定的规律。我把排查过程拆成几个环节按顺序做大多数问题五分钟内都能定位。6.1 先判断是容器问题还是子项问题打开 DevTools选中可疑元素看它的 computed 尺寸和实际渲染的边框。如果元素宽度比预期大问题出在子项尺寸或内容上如果元素宽度已经正确但位置不对问题出在父容器的对齐或轨道设置上。举个例子一个flex: 1的子项渲染宽度是 398px但父容器剩余空间是 400px差 2px。这时看子项的min-width通常是auto在起作用某个内联内容阻止了完全压缩。改成min-width: 0立刻就好。6.2 用临时样式定位而不是猜我会给可疑元素加上醒目的临时样式比如outline: 2px solid red给它的父容器加上outline: 2px solid blue。这样一眼就能看出哪个元素占了不该占的尺寸哪些元素之间有诡异的间隙。这种方法在排查“布局重叠”和“幽灵空隙”时尤其高效比对着代码猜快得多。如果页面结构太深我习惯写一个最小化复现页面把无关样式全部剥离只保留结构和少数几个属性。这一步看起来麻烦但它能把问题从“一堆代码交互的结果”变成“一个属性触发的行为”。我在定位flex子项溢出、grid轨道塌陷这些问题时几乎每次都能靠最小化复现把问题缩小到一个属性上。6.3 常见问题速查表症状可能原因快速处理flex: 1 右侧差几像素子项 min-width: auto 或容器宽度受父级 padding 影响给子项加 min-width: 0flex 子项换行不生效flex-wrap 没加或子项有 flex-shrink: 0 撑破容器确认 flex-wrap: wrap检查子项宽度约束align-items: center 无效父容器高度为 auto没有剩余空间可分配给父容器固定高度或 min-heightgrid 列宽不等fr 单位子项中的长内容把轨道撑宽改用 minmax(0, 1fr)grid 子项超出容器行轨道高度为 auto被内容撑开用 grid-auto-rows 控制隐式轨道高度图标文字按钮视觉不居中行内元素间隙或 baseline 对齐干扰svg 加 display: block固定尺寸卡片内容贴顶不居中默认 align-items: stretch 但无明确高度给卡片 min-height内部 flex 管理内容位置6.4 关于浏览器兼容性的两句话现代浏览器的 Flex 和 Grid 支持度已经非常稳定Flex 的gap也已经在所有主流浏览器里可用。以前为了兼容旧浏览器而用 margin 模拟间距的做法现在可以逐渐淘汰。但有一件事值得保留习惯写gap时留意设计稿的间距是否真的需要“始终相等”如果间距在不同断点下要变化gap依然能做但需要在媒体查询里覆盖不要为了省事把所有间距都交给 gap。6.5 从 DOM 顺序到视觉顺序的一致性问题grid-auto-flow: dense和order属性都可以改变元素的视觉顺序这在视觉布局上很自由但牺牲了文档顺序和屏幕阅读器顺序的一致性。如果页面里有表单、导航这类对可访问性敏感的内容尽量保持视觉顺序和 DOM 顺序一致让特殊顺序只发生在纯展示类区域比如图片墙、卡片墙。7. 给刚接触布局的人几条实用建议写到这里Flex 和 Grid 的核心知识基本都覆盖了。最后分享几条我自己平时写布局时的习惯这些不是教科书上的条款而是踩过足够多的坑之后沉淀下来的经验。第一条把box-sizing: border-box写进全局样式。这一条能消灭的布局 bug 数量比任何其他单一规则都要多。绝大多数“差几个像素”的问题最后都能追溯到某个元素忘了把 padding 和 border 算进宽度。第二条在脑子里先判断这一块是“一排”还是“一片”。卡片、导航、按钮组是一排用 Flex页面骨架、仪表盘、商品列表是一整片用 Grid。这个判断做对了布局代码会清爽很多。第三条遇到尺寸问题时先检查min-width和min-height再检查父容器有没有明确尺寸。这两个地方是布局问题的高发区。每次我写flex: 1时都会习惯性地在后面补一句min-width: 0这个组合已经帮我在无数个项目里避开了“内容撑破弹性布局”的坑。第四条善用 DevTools 的 Grid 和 Flex 可视化工具。Chrome 的网格叠加层可以把轨道、间距、栅格全部画出来Flex 容器也用橙色线标出主轴和交叉轴。布局排错时先打开这些可视化工具比反复刷新页面猜问题要高效得多。最后想说的是布局不是背语法而是建立一种“空间分配”的直觉。Flex 和 Grid 的出现已经大大简化了布局难度但它们的价值只有在正确选型时才能完全发挥。当你看到一个设计稿时如果能下意识地判断出哪里该用弹性、哪里该用网格并且知道为什么那你的布局能力就已经跨过了大多数人的门槛。这套框架把页面从“玄学”变成“工程”也是我在这篇文章里最想传递的东西。