CSS 现代布局：Flexbox 与 Grid 实战指南

布局演进

从 float 到 flexbox 再到 grid，CSS 布局经历了三次革命。现代 CSS 布局的核心思路：Flexbox 处理一维布局，Grid 处理二维布局。

Flexbox：一维布局之王

核心概念

Flexbox 沿一条主轴排列元素，适合行或列方向的布局。

.container {
  display: flex;
  flex-direction: row;        /* 主轴方向：row | column */
  justify-content: center;    /* 主轴对齐 */
  align-items: center;        /* 交叉轴对齐 */
  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;
}

等宽卡片网格：

.cards {
  display: flex;
  gap: 20px;
}
.cards > * {
  flex: 1;  /* 每个元素等分空间 */
}

flex-wrap 与响应式

.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.responsive-grid > * {
  flex: 1 1 250px; /* 最小宽度 250px，自动换行 */
}

Grid：二维布局大师

基本用法

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

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

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

这个写法会自动根据容器宽度决定每行几列，完美自适应。

经典布局：圣杯布局

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

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

响应式只需一行媒体查询：

@media (max-width: 768px) {
  .holy-grail {
    grid-template-areas:
      "header"
      "main"
      "nav"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Flexbox vs Grid：怎么选？

| 场景 | 推荐 | |------|------| | 导航栏、工具栏 | Flexbox | | 卡片列表 | Grid | | 表单输入组 | Flexbox | | 页面整体布局 | Grid | | 不确定子元素数量 | Flexbox | | 精确控制行列 | Grid |

gap：统一间距

gap 属性同时适用于 Flexbox 和 Grid，替代了过去的 margin hack：

.flex-layout { display: flex; gap: 12px; }
.grid-layout { display: grid; gap: 12px; }

实用技巧

aspect-ratio 控制宽高比

.thumbnail {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

minmax 防止挤压

.sidebar {
  grid-column: 1;
  min-width: 0; /* 防止内容溢出 */
}

总结

Flexbox 和 Grid 不是互斥的，而是互补的。掌握两者的核心概念，你就能应对 99% 的布局需求——不需要 float，不需要 position hack，不需要额外的 div 嵌套。

记住：好的布局是结构化的 CSS，而不是堆砌的 hack。