现代 CSS 布局技术完全指南

前言

CSS 布局在过去几年经历了巨大的变革。从曾经的 Float 布局到如今的 Flexbox 和 Grid，我们有了更强大的工具。

Flexbox

最适合一维布局：

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

CSS Grid

适合二维布局：

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

经典布局示例

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

Container Queries

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

总结

现代 CSS 布局已经足够强大，大多数情况下我们不再需要 JS 库来实现布局。