CSS Grid 与 Flexbox：现代布局的选型与实践

一句话选型

Flexbox 管"一维"（一行/一列内的排布），Grid 管"二维"（行与列同时规划）。绝大多数页面两者配合使用，而不是二选一。

Flexbox：一维布局

核心概念是主轴与交叉轴。三个关键属性：

.nav {
  display: flex;
  align-items: center;      /* 交叉轴（垂直）居中 */
  justify-content: space-between; /* 主轴两端分布 */
  gap: 12px;
}

.nav .item { flex: 1; }     /* 平分剩余空间 */
.nav .logo { flex: 0 0 auto; } /* 保持固有尺寸 */

• flex-grow：剩余空间怎么分（1 = 等分）
• flex-shrink：空间不足时怎么缩
• flex-basis：主轴上的初始尺寸

Grid：二维布局

Grid 用"轨道"规划行列，auto-fit / minmax 组合还能自动响应：

.card-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

/* 区域命名，页面骨架一目了然 */
.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
}

repeat(auto-fit, minmax(240px, 1fr)) 是"响应式卡片墙"的万能公式：屏幕够宽就多排几列，变窄自动换行。

三个实战案例

1. 导航栏 → Flexbox

导航是典型一维场景：logo 靠左、链接居中、按钮靠右，Flexbox 的 justify-content 完美胜任。

2. 卡片墙 → Grid

商品/文章卡片需要"行列对齐"，用 Grid 的 repeat(auto-fit, minmax(...)) 自动排布，比手写媒体查询更优雅。

3. 双栏博客 → Grid 区域

.blog {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
}
.blog .sidebar {
  position: sticky; top: 24px;  /* 侧栏随滚动吸顶 */
  align-self: start;            /* 不拉伸到整列高度 */
}

选型速查

• 元素要在一条线上排布（导航、按钮组、标签）→ Flexbox
• 内容构成行列矩阵（卡片墙、仪表盘、表格）→ Grid
• 既有整体骨架又有局部排布 → Grid 定骨架，Flex 管内部

Flexbox 擅长"摆放"，Grid 擅长"规划" -- 先 Grid 后 Flex，是现代布局的黄金组合。