为什么align-self:伸展不能在flex项目上工作？

您已在弹性项目上指定了高度.

.flex-items {
   width: 100px;
   height: 250px;
   border: 1px solid red;
}

这个高度规则覆盖stretch的align-items和align-self(这里的原因).

此外,添加align-self: stretch到.side-bar任何地方都无能为力,因为stretch已经应用 - 它是默认值.

试试这个:

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 500px;
  border: 1px solid blue;
}

.flex-items:not(.side-bar) { /* modified selector */
  width: 100px;
  height: 250px;
  border: 1px solid red;
}

.side-bar {
  width: 400px;
  background-color: yellow;
  border: 1px solid red;
}