Flexbox 还是 Grid：一维二维的选型决策

布局只有两种问题：沿一条线排，或排成一个面。选对工具，CSS 代码量少一半。

新手布局最耗时间的不是写代码，是选错工具：用 Flexbox 硬凑二维网格，或用 Grid 做一维导航，代码越写越拧。判断标准只有一句话——内容是一维还是二维。

三十秒决策树

• 元素只沿一个方向排（一行导航、一列卡片、表单字段）：用 Flexbox

• 元素同时受行和列约束（整页骨架、图片墙、仪表盘）：用 Grid

• 一行里元素要等分且要换行：Flexbox 加 flex-wrap

• 不清楚时：先 Flexbox，发现频繁算百分比宽度就换 Grid

Flexbox：一维分配

核心是三件套：容器 display:flex，主轴 justify-content，交叉轴 align-items。

.nav { display: flex; justify-content: space-between; align-items: center; }
.card-row { display: flex; gap: 16px; flex-wrap: wrap; }
.card-row > * { flex: 1 1 240px; }

第三段是响应式卡片的杀手锏：flex-basis 给最小宽度，空间够就并排，不够自动折行，一行最多放几个由浏览器算，不用手写媒体查询。

Grid：二维骨架

页面骨架是 Grid 的主场。三行两列的经典后台布局：

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr 48px;
  min-height: 100vh;
}

十二列网格同样一行搞定：grid-template-columns: repeat(12, 1fr)，区块用 grid-column: 1 / 13 这类区间声明位置。比浮动时代层层嵌套清晰一个量级。

混合使用才是常态

真实页面几乎总是两者混用：外层 Grid 定骨架，内层 Flexbox 排细节——卡片内部的标题、标签、按钮行全交给 Flexbox。记住分工：Grid 管「区块在哪」，Flexbox 管「区块里的东西怎么排」。

三个高频坑

• 想居中一个盒子：Flexbox 的 justify/align 双 center 最快，别再绝对定位加负 margin

• flex:1 的元素内容过多被压缩：给该元素加 min-width:0，否则长内容会把布局撑爆

• Grid 的 1fr 不等于平分：fr 分的是剩余空间，内容会撑开轨道，要真平分用 minmax(0, 1fr)

布局选对了，后续改样式是微调；选错了，每一行都在和浏览器搏斗。先问一维还是二维，再动手写。