CSS Grid 与 Flexbox 布局指南

目录

CSS Grid 与 Flexbox 布局指南

现代 CSS 布局主要依靠 Grid 和 Flexbox 两种技术。了解它们的特点和适用场景是前端开发的基础技能。

Flexbox：一维布局的王者

Flexbox 专门用于一维布局（行或列）：

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.flex-item {
  flex: 1;
}

Flexbox 适用场景

  • 导航栏布局
  • 卡片内部元素对齐
  • 垂直居中
  • 等高列布局

CSS Grid：二维布局的利器

Grid 可以同时控制行和列：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 2rem;
}

.grid-item {
  grid-column: span 2;
}

Grid 适用场景

  • 整体页面布局
  • 复杂的卡片网格
  • 响应式设计
  • 重叠元素布局

选择指南

场景推荐方案原因
导航栏Flexbox一维排列，需要对齐
页面主体Grid二维布局，更灵活
卡片内容Flexbox简单的垂直/水平排列
图片画廊Grid需要控制行列

实战技巧

响应式网格

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

完美居中

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

掌握这两种布局技术，你就能应对绝大多数前端布局需求。记住：Flexbox 用于一维，Grid 用于二维！