CSS中align-content属性的normal与stretch值是否存在差异？

align-content: normal 和 stretch 并非完全相同，也没有任何一个被废弃。你测试时没看到差异，是因为刚好处于二者表现重合的场景中。

核心差异场景 #

• 默认无约束场景（容器无固定交叉轴高度、项目无自身高度）
  此时在flex布局中，normal 的默认行为就是让多行项目拉伸填充交叉轴的可用空间，和 stretch 的表现完全一致，这也是你切换值后页面没变化的原因。

• 容器设置固定交叉轴高度，或项目有自身高度/最小高度

  • stretch：会强制多行项目在交叉轴方向拉伸（前提是项目没有设置固定高度），填满容器的交叉轴空间；如果项目有固定高度，则该值不会改变项目的高度。
  • normal：遵循布局的默认流，多行项目会按照默认的对齐逻辑（比如flex-start）排列，不会主动拉伸填充容器的剩余空间。

示例代码验证 #

/* 容器设置固定高度 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  border: 1px solid #000;
  gap: 10px;
}

.flex-item {
  width: 100px;
  background: #ddd;
}

/* 应用stretch的容器 */
.stretch-demo {
  align-content: stretch;
}

/* 应用normal的容器 */
.normal-demo {
  align-content: normal;
}

在这个例子中，stretch-demo 里的多行项目会拉伸填满300px的容器高度，而 normal-demo 里的项目会堆叠在容器顶部，下方留出空白区域。

额外说明 #

normal 是一个通用的布局关键字，在grid布局等其他场景中会有不同的表现逻辑；而 stretch 是专门针对对齐场景的属性值，仅在flex、grid等布局的对齐上下文中生效。

内容的提问来源于stack exchange，提问作者Kotie77