现代 CSS 布局技巧

Flexbox vs Grid

CSS Flexbox 和 Grid 是现代布局的两大利器。简单来说：

• Flexbox：一维布局（行或列）
• Grid：二维布局（行和列）

Flexbox 常用模式

居中

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

等分布局

.equal-width {
  display: flex;
  gap: 1rem;
}

.equal-width > * {
  flex: 1;
}

Grid 常用模式

响应式网格

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

经典的圣杯布局

.layout {
  display: grid;
  grid-template:
    "header header header" auto
    "nav    main   aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
}

实用技巧

间隔控制

.stack > * + * {
  margin-top: 1rem;
}

宽高比

.ratio {
  aspect-ratio: 16 / 9;
}

总结

掌握 Flexbox 和 Grid，你就能用最简洁的代码实现几乎所有的布局需求。关键是理解它们各自的适用场景：一维用 Flexbox，二维用 Grid。