CSS 布局：Flex 与 Grid

现代 CSS 中，Flexbox 和 Grid 是两把最常用的布局利器。很多人纠结"该用哪个"，本文用尽量短的篇幅讲清它们的差异和选型。

一、Flexbox：一维布局

Flex 处理一条轴上的排列——要么横要么竖，是"一维"布局。

.container {
  display: flex;
  justify-content: space-between; /* 主轴方向分布 */
  align-items: center;            /* 交叉轴对齐 */
  gap: 12px;                      /* 项间距 */
}

核心概念：

• 主轴：由 flex-direction 决定（row / column）；
• 交叉轴：与主轴垂直；
• flex: 1 让子项按比例分配剩余空间，是最常见的"一栏自适应"写法。

典型场景：导航栏、按钮组、垂直居中、左右两端对齐。

二、Grid：二维布局

Grid 同时控制行和列，是"二维"布局。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分列 */
  gap: 16px;
}

最实用的能力是响应式自动换列，无需媒体查询：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

minmax(240px, 1fr) 表示每列至少 240px，放不下就自动换行，非常适合卡片列表。

三、该用哪个？

一条好记的准则：

页面整体骨架用 Grid，组件内部排列用 Flex。

两者可以嵌套使用。例如页面用 Grid 划分"头部 / 内容 / 侧栏"，内容区里的卡片列表再用 Flex 排列。

四、小实战：卡片 + 自适应网格

<div class="layout">
  <aside>侧栏</aside>
  <main>
    <div class="cards">
      <div class="card">A</div>
      <div class="card">B</div>
      <div class="card">C</div>
    </div>
  </main>
</div>

.layout {
  display: grid;
  grid-template-columns: 220px 1fr; /* 左侧栏固定，右侧自适应 */
  gap: 20px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.card {
  display: flex;          /* 卡片内部用 Flex */
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: #f5f7fa;
  border-radius: 8px;
}

页面骨架交给 Grid，卡片内部交给 Flex，各司其职。

五、容易踩的坑

• flex: 1 不等同于 width: 100%，它分配的是剩余空间；
• Grid 中 1fr 是比例单位，但内容过宽时可能撑破，必要时加 minmax(0, 1fr)；
• 用 gap 代替 margin 做间距，能避免最后一项多出边距的烦恼。

小结

• Flex：一维，擅长排列与对齐；
• Grid：二维，擅长整体网格与响应式布局；
• 骨骼用 Grid，组件用 Flex，必要时嵌套。

掌握这两者，绝大多数页面布局都能优雅解决。