CSS 布局学习笔记：Flexbox 与 Grid 实战总结

Flexbox：一维布局利器

Flexbox 适合处理一个方向上的元素排列——要么水平排列，要么垂直排列。

核心概念

┌─────────────────────────────────┐
│  main axis (主轴) →              │
│ ┌───┐ ┌───┐ ┌───┐               │
│ │ A │ │ B │ │ C │               │
│ └───┘ └───┘ └───┘               │
│           ↑ cross axis (交叉轴)  │
└─────────────────────────────────┘

常用模式

水平居中：

.center-h {
  display: flex;
  justify-content: center; /* 主轴居中 */
}

完全居中：

.center-both {
  display: flex;
  justify-content: center;
  align-items: center; /* 交叉轴居中 */
}

导航栏——两端对齐：

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

等高列：

.columns {
  display: flex;
  align-items: stretch; /* 默认值，子元素等高 */
}

flex 属性速查

Grid：二维布局王者

Grid 适合处理行和列同时存在的复杂布局。

基本用法

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
  gap: 20px;
}

经典布局：圣杯布局

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

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

响应式卡片网格

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

auto-fill 会自动根据容器宽度决定每行放几个卡片，minmax(280px, 1fr) 确保每个卡片最小 280px，剩余空间均分。

如何选择

常见坑

1. Flexbox 子元素的 min-width 默认是 auto——内容过长时不会缩小。解决：设置 min-width: 0
2. Grid 的 1fr 不是均分——1fr 是分配剩余空间，如果有固定宽度的列存在，1fr 列会缩小
3. gap 在旧版 Flexbox 不支持——Flexbox 的 gap 是后来加的，需注意浏览器兼容性

总结

现代 CSS 布局的口诀：一维用 Flex，二维用 Grid，简单居中用 Flex。两者结合使用，基本可以覆盖所有日常布局需求。