Flex 中 align-items 和 align-content 的区别？

区别

属性 作用对象 需要 flex-wrap 场景
align-items 单行项目 ❌ 控制每行项目在交叉轴的对齐
align-content 多行之间的间距 ✅ 需要 wrap 控制行与行之间的空间分布

图示

align-items: center（单行）
┌─────────────────────────┐
│      ┌──┐ ┌──┐ ┌──┐      │  ← 每个项目垂直居中
│      │  │ │  │ │  │      │
│      └──┘ └──┘ └──┘      │
└─────────────────────────┘

align-content: space-between（多行）
┌─────────────────────────┐
│ ┌──┐ ┌──┐ ┌──┐          │  ← 第一行贴顶
│ └──┘ └──┘ └──┘          │
│                          │  ← 空间
│ ┌──┐ ┌──┐ ┌──┐          │  ← 第二行贴底
│ └──┘ └──┘ └──┘          │
└─────────────────────────┘

示例

.container {
  display: flex;
  flex-wrap: wrap;        /* 必须换行 */
  height: 400px;
  align-items: center;     /* 每行内项目垂直居中 */
  align-content: space-between;  /* 行间距均匀分布 */
}

注意事项

同分类其他题目

›CSS 盒模型有哪些？box-sizing 的作用是什么？›CSS 选择器优先级是如何计算的？›什么是 BFC？如何创建 BFC？有什么应用？›如何实现元素水平垂直居中？有哪些方法？