CSS 现代布局：Grid 与 Flexbox 实战技巧

前言

CSS 布局经历了从表格布局到浮动布局，再到 Flexbox 和 Grid 的演进。如今，Flexbox 和 Grid 已经成为现代 Web 布局的两大基石。本文将结合实际场景，分享一些实用的布局技巧。

Flexbox 实战

经典导航栏

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

卡片列表自适应

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
  /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 300px */
}

粘性底部布局

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;  /* 撑满剩余空间，将 footer 推到底部 */
}

.footer {
  flex-shrink: 0;
}

Grid 实战

响应式文章网格

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

auto-fill 和 minmax() 的组合是实现响应式网格的经典方案，无需任何媒体查询。

经典博客布局

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "content aside"
    "footer  footer";
  gap: 2rem;
}

.header { grid-area: header; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "aside"
      "footer";
  }
}

瀑布流布局

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

.masonry-item {
  break-inside: avoid;
}

.masonry-item:nth-child(1) {
  grid-row: span 2;
}

Flexbox vs Grid 选择指南

场景	推荐	原因
一维导航栏	Flexbox	主轴排列灵活
二维整体布局	Grid	行列同时控制
未知数量的卡片	Grid + auto-fill	自动填充网格
居中对齐	Flexbox	align/justify 简洁
不规则网格	Grid	精确控制位置

实用技巧

1. 使用 gap 替代 margin

/* ❌ 旧方式 */
.flex > * + * {
  margin-left: 1rem;
}

/* ✅ 新方式 */
.flex {
  display: flex;
  gap: 1rem;
}

2. 自动等分布局

.equal-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
}

3. 内容自适应最小宽度

.grid-item {
  min-width: 0;  /* 防止 Grid 溢出 */
  overflow-wrap: break-word;
}

总结

Flexbox 擅长一维排列，Grid 擅长二维布局。两者结合使用可以应对几乎所有现代 Web 布局需求。掌握 gap、auto-fill、minmax() 等新特性，能让你的 CSS 代码更简洁、更强大。

TheBlockSky

前言