现代 CSS 布局完全指南：Flexbox 与 Grid

现代 CSS 布局完全指南：Flexbox 与 Grid

CSS 布局经历了从 float 到 Flexbox 再到 Grid 的演进。本文将带你深入理解这两种现代布局系统。

Flexbox：一维布局之王

Flexbox 适合一维布局（横向或纵向排列）。

核心概念

.container {
  display: flex;
  flex-direction: row;        /* 主轴方向 */
  justify-content: center;     /* 主轴对齐 */
  align-items: center;         /* 交叉轴对齐 */
  flex-wrap: wrap;            /* 换行 */
  gap: 16px;                  /* 间距 */
}

常见布局模式

水平垂直居中

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

导航栏（左 logo + 右菜单）

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

等宽卡片网格

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.cards > * {
  flex: 1 1 300px; /* 最小宽度 300px，自动伸缩 */
}

Grid：二维布局之王

Grid 适合二维布局（同时控制行和列）。

基本用法

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

响应式网格（无需媒体查询）

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

这个模式非常强大：卡片自动排列，每列最小 280px，自动填充可用空间。

经典页面布局

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Flexbox vs Grid：如何选择？

经验法则

1. 小范围布局用 Flexbox — 导航栏、按钮组、表单项
2. 大范围布局用 Grid — 页面整体结构、卡片网格
3. 两者可以嵌套使用 — Grid 做外层，Flexbox 做内层

实用技巧

gap 属性

/* Flexbox 和 Grid 都支持 gap */
.flex { display: flex; gap: 12px; }
.grid { display: grid; gap: 16px; }

aspect-ratio 控制宽高比

.card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

clamp() 实现流式排版

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

总结

现代 CSS 布局已经非常强大。掌握 Flexbox 和 Grid，你几乎可以实现任何你想要的布局效果。记住核心原则：

• Flexbox 管一维，Grid 管二维
• 优先使用 gap 替代 margin
• 善用 auto-fill / auto-fit 和 minmax 实现响应式
• 两者嵌套使用效果更佳

开始你的现代 CSS 布局之旅吧！✨