为何align-self: stretch在Flex项目上无法生效？

你的代码里有两个核心因素导致拉伸效果失效：

• Flex项目设置了固定高度
  .item 类统一声明了 height: 50px，而 align-self: stretch 的作用是让项目在交叉轴方向（当前 flex-direction: row，交叉轴为垂直方向）占满容器可用空间，但项目自身的固定高度优先级更高，直接覆盖了拉伸行为。

• 容器 align-items: baseline 的间接影响
  容器设置了 align-items: baseline，默认让所有项目对齐基线。虽然你给 .one 单独设置 align-self: stretch 试图覆盖这个规则，但由于项目本身有固定高度，拉伸逻辑根本无法触发。

要让 align-self: stretch 生效，只需调整项目的高度约束：

1. 移除 .item 中的固定 height: 50px，或者将其改为 min-height: 50px（既保留最小高度，又允许项目按需拉伸）。
2. 确保项目在交叉轴方向没有其他限制尺寸的属性（如 max-height 等）。

修改后的核心CSS示例：

.item {
  width: 50px;
  /* 替换固定height为min-height，或直接删除height属性 */
  min-height: 50px;
  background: rgb(243, 62, 92);
  font-size: 13px;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .one {
  background: red;
  align-self: stretch;
}

调整后，.one 项目会在垂直方向拉伸至容器的300px高度，其他项目则保持最小50px高度，遵循容器 align-items: baseline 的对齐规则。

补充说明：当容器同时设置 flex-wrap: wrap 和 align-content: stretch 时，多行场景下每行的交叉轴空间会被拉伸，但单个项目的拉伸仍取决于自身是否有固定尺寸及 align-self 的配置。

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