如果直接让 AI 写一个项目展示页，宽屏上看着挺好——卡片整齐排列、导航居中、侧栏老实待在右边。把浏览器窗口往窄里一拖，整个页面立刻散架：卡片挤成一坨，导航溢出屏幕，图片被切掉半边。
打开源码，语法一行都没错。
问题出在布局系统上：AI 写的布局代码用了两套完全不同的系统——Flex 和 Grid——而我们看不出它用的哪一套，也不知道该动哪个属性。缩窗口翻车不是代码写错了，是分不清这两套系统各自在管什么。
Flex 管一维排列，Grid 管二维网格。 分清这一点，AI 写的布局就从黑箱变成了可以看懂、可以改、可以精确指挥的东西。
Flex 布局：一维排列
Flex 解决的核心问题是把一组元素沿一条线排列——横着排或者竖着排，一次只管一个方向。导航栏里的菜单项横着排一行、侧边栏里的链接竖着排一列，都是 Flex 最典型的场景。
横向排列
先看一段 AI 常见输出：
.nav {
display: flex;
gap: 16px;
}display: flex 把 .nav 变成一个 Flex 容器，里面的子元素自动横向排成一行。gap: 16px 在每两个子元素之间插入 16px 的间隔，由容器统一管理——不需要给每个子元素单独加 margin。
渲染出来是这样的：
到这一步没有任何问题。问题出在窗口变窄之后。
换行控制：缩窗口翻车的第一个原因
把窗口拖窄，导航项挤不下一行了——但 Flex 默认不换行，所有子元素会被强行压缩宽度，直到压无可压就溢出容器。
根本原因是 Flex 有一个属性叫 flex-wrap，默认值是 nowrap——不允许换行。加一行就能解决：
.nav {
display: flex;
gap: 16px;
flex-wrap: wrap;
}flex-wrap: wrap 告诉浏览器：一行排不下的时候，自动折到下一行。加上这一行之后，窗口再怎么拖窄，菜单项也不会溢出，只会整齐地换行排列。
如果缩窗口后发现元素溢出或被挤变形，第一件事就是检查有没有 flex-wrap: wrap。 这是 Flex 布局里最高频的翻车点。
对齐
Flex 容器有两根轴：主轴（默认水平方向）和交叉轴（默认垂直方向）。对齐属性分别控制这两个方向：
• justify-content控制主轴方向的对齐——比如让菜单项居中、两端对齐或均匀分布• align-items控制交叉轴方向的对齐——比如让高度不一样的子元素垂直居中
.nav {
display: flex;
gap: 16px;
flex-wrap: wrap;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
如果 AI 写的页面里某组元素对不齐——比如一行按钮有高有矮、logo 和导航文字不在一条水平线上——大概率是 align-items 没设对。如果一组元素想居中但偏在左边，查 justify-content。
Flex 的属性总览
Flex 涉及的属性不少，但日常遇到的就这几个：
display: flex | flex | ||
flex-direction | rowcolumn（竖排） | ||
flex-wrap | nowrapwrap | ||
gap | 16px | ||
justify-content | centerspace-between、flex-start | ||
align-items | centerflex-start、stretch | ||
flex | 1 |
表里能看出来，Flex 大部分属性写在容器上，不是写在子元素上。改了子元素某个属性没反应的话，先看看它是不是应该写在父容器上。
Grid 布局：二维网格
Flex 管一个方向，Grid 管两个方向——同时控制行和列。产品卡片要排成三列两行、图片要按网格铺开、仪表盘要划分成顶栏 + 侧栏 + 主内容区，这些需要同时管行列的场景，就是 Grid 的地盘。
定义网格
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}display: grid 启用 Grid 布局。grid-template-columns: repeat(3, 1fr) 定义了三列，每列等宽（1fr 是"一等份"的意思，三个 1fr 就是三等份）。gap: 24px 和 Flex 里一样，控制网格单元之间的间距。
渲染出来是三列等宽的卡片网格：
自适应列数：缩窗口翻车的第二个原因
上面那个网格在宽屏上完美，但窗口一缩，三列硬挤在窄屏里——卡片被压扁，文字换行，甚至溢出。
repeat(3, 1fr) 写死了"永远三列"，窗口再窄也是三列。把列数交给浏览器自己算：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}repeat(auto-fill, minmax(280px, 1fr)) 的意思是：每列最窄 280px、最宽撑满剩余空间，具体放几列由容器宽度自动决定。宽屏放三列，平板放两列，手机放一列——不需要写任何 media query。
如果 AI 输出的 Grid 在缩窗口时变形，第一件事检查 grid-template-columns 里有没有写死列数。 把固定列数换成 auto-fill + minmax 是最常见的修复手段。
Grid 的属性总览
Grid 的属性比 Flex 多，但日常碰到的核心属性也就几个：
display: grid | grid | ||
grid-template-columns | repeat(3, 1fr)repeat(auto-fill, minmax(280px, 1fr)) | ||
grid-template-rows | auto | ||
gap | 24px | ||
row-gapcolumn-gap | 32px、列距 16px | ||
grid-column | span 2 | ||
grid-row | span 2 |
gap 上一篇在盒模型那里见过——Flex 和 Grid 里用法完全一样，都是写在容器上统一管间距。Grid 额外多了 row-gap 和 column-gap，可以让行间距和列间距不一样。和 Flex 一样，Grid 大部分布局属性也写在容器上。
实际页面里的 Flex 和 Grid
接下来我们在真实页面结构里认一下这两套系统，前面讲语义化的时候提到过，一个典型页面会有 header（导航）、main（主内容）、aside（侧栏）这些骨架区块——现在要关心的是这些区块内部和之间是怎么排的。
Flex 实例：导航栏
几乎所有网站的顶部导航栏都在用 Flex。典型的导航栏布局拆解：
导航容器上有 display: flex，logo 在左、搜索栏自动填充中间空间（flex: 1）、菜单和操作按钮在右——一行排列，一个方向，典型的 Flex 场景。
Grid 实例：卡片网格
课程列表、产品卡片、博客文章列表，几乎都在用 Grid：
容器上是 display: grid 加 repeat(3, 1fr) 的列定义。卡片按行列排列，同时管了水平和垂直两个方向——这就是 Grid 的典型场景。
怎么一眼判断 AI 用的哪一套
不需要一行行读代码。Chrome 和 Edge 的开发者工具在 Flex 和 Grid 容器旁边会显示专门的调试徽章：
1. 按 F12打开开发者工具2. 在 Elements 面板里找到布局容器 3. 容器标签旁边会出现一个小标记—— flex或grid
点击这个徽章还能开启可视化辅助线——Grid 会显示网格线和行列编号，Flex 会高亮排列方向和间距。在调试布局问题的时候，这比读代码直觉得多。
布局出问题时怎么查
上一篇给了一个通用的调样式流程：开发者工具定位 → 翻译成"选择器 + 属性 + 值" → 交给 AI 执行。布局问题沿用这个流程，但第一步要多做一件事——先判断出问题的容器是 Flex 还是 Grid，因为两套系统的属性完全不同，判断错方向后面全白费。
实际操作就是在开发者工具里多看一眼容器标签旁的徽章。确认系统类型之后，按问题现象锁定最可能的属性：
flex-wrap | grid-template-columns | |
justify-contentalign-items | justify-itemsalign-items | |
gap | gap、row-gap、column-gap | |
flex 值 | grid-column、grid-row |
拿缩窗口卡片挤成一坨的场景走一遍：开发者工具看到容器标签旁是 grid，grid-template-columns 写的是 repeat(3, 1fr)——写死了三列。给 AI 的指令就是：把 .card-grid 的 grid-template-columns 从 repeat(3, 1fr) 改成 repeat(auto-fill, minmax(280px, 1fr))。一个缩窗口问题，从定位到修复不超过三步。
怎么跟 AI 说布局问题
上面的排查流程解决了"怎么自己判断"，最后一步还是要把修改意图交给 AI。这里不需要背模板，记住三件事就够：
1. 开口先说系统类型。 "这是一个 Grid 布局的问题"——一句话把 AI 的搜索范围砍掉一半，避免它在 Flex 和 Grid 之间猜来猜去。 2. 给属性名和具体值，不给形容词。 "间距太大了"是形容词，"gap 从 24px 改成 16px"是可执行指令。 3. 描述窄屏的预期行为。 布局问题几乎都和窗口宽度有关，"窄屏时自动减到两列"比"让它自适应"精确得多。
对比一下效果。
模糊版：
页面缩小后卡片挤在一起了，帮我修一下
AI 收到这个指令后只能猜——可能改 flex-wrap，可能改 grid-template-columns，可能加 media query，结果不可控。
精确版：
.product-grid 用的是 Grid 布局，grid-template-columns 写死了 repeat(3, 1fr)， 窗口缩到 800px 以下时三列被压扁。 改成 repeat(auto-fill, minmax(280px, 1fr))，窄屏时自动减列，最窄单列堆叠。 gap 保持 24px 不变。
精确版多了三样东西：布局类型（Grid）、具体属性和当前值（grid-template-columns: repeat(3, 1fr)）、窄屏预期（自动减列）。这些信息全部来自开发者工具里的那一眼，不需要额外记忆。
下次缩窗口发现页面散架，先做一件事：按 F12，找到出问题的容器，看徽章是 flex 还是 grid。系统类型确定了，该查哪个属性就有方向了。再把在开发者工具里看到的选择器、属性名、当前值告诉 AI——它不需要我们背属性，但需要我们指路。
