CSS 布局实用指南

CSS 布局从早期的 float 和 position，发展到现在以 Flexbox 和 Grid 为核心的现代布局方案。 本文整理了一些常用场景及其最佳实践。

Flexbox：一维布局利器

Flexbox 适合处理单行或单列的元素排列。以下是我最常用的几个场景：

1. 水平居中 + 垂直居中

.container {
  display: flex;
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

2. 两端对齐导航栏

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

3. 等宽多列布局

.card-list {
  display: flex;
  gap: 1rem;
}
.card {
  flex: 1;  /* 等分剩余空间 */
}

4. 内容自动撑满剩余空间

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1;  /* 撑满页脚上方的所有空间 */
}

Grid：二维布局王者

Grid 适合同时控制行和列的复杂布局。几个典型场景：

1. 响应式卡片网格

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

auto-fill 配合 minmax() 是实现无需媒体查询的响应式布局的关键技巧—— 列数会根据容器宽度自动调整。

2. 经典圣杯布局

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Flexbox vs Grid：如何选择

一个简单的判断原则：

• 内容驱动布局（内容决定尺寸）→ 用 Flexbox
• 容器驱动布局（先有网格，内容放进去）→ 用 Grid
• 处理单行/单列的对齐和分布 → 用 Flexbox
• 处理多行多列的整体布局 → 用 Grid

两者不是非此即彼的关系。在实际项目中，经常是 Grid 做页面大框架， Flexbox 做组件内部的对齐——配合使用效果最好。

浏览器兼容性

Flexbox 和 Grid 在现代浏览器中都有很好的支持（覆盖 97% 以上的用户）。 如果项目需要支持 IE11，Flexbox 基本可用（部分 bug）， Grid 则需要降级方案或使用 autoprefixer。

掌握 Flexbox 和 Grid 之后，布局不再是 CSS 的痛点。 与其记忆大量属性，不如多动手练习——用得多了自然就熟了。