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

Question

我试图拉伸.side-bardiv,使其占据整个窗口的高度.

我在flex容器中添加了flex并指定了flex项目的宽度和高度,但是side-bar的高度显示与flex项目相同.

是因为我的CSS类的顺序？

* {
  margin: 0;
}

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

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

.side-bar {
  width: 400px;
  align-self: stretch;
}

<div class="flex-container">
  <div class="flex-items side-bar"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>

Answer 1

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

.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;
}

<div class="flex-container">
  <div class="flex-items side-bar"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>

Answer 2

align-self仅与父容器的（横轴）结合使用align-items，而父容器又与flex-direction: column. 所以在你的情况下它没有影响。删除align-self并添加height: 100%它就会起作用。

更新 Fiddle（感谢 Michael_B）

参考Flexbox|Codrops 参考