为什么 align-self: stretch 不适用于弹性项目？答案

【问题标题】：Why is align-self: stretch not working on a flex item?为什么 align-self: stretch 不适用于弹性项目？
【发布时间】：2016-03-25 17:56:41
【问题描述】：

我正在尝试拉伸 .side-bar div，使其占据整个窗口的高度。

我在 flex 容器中添加了 flex 并指定了 flex 项的宽度和高度，但侧边栏的高度显示为与 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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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

此高度规则覆盖 align-items 和 align-self (here's why) 上的 stretch。

此外，将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>

【讨论】：

【解决方案2】：

align-self 只能与父容器的align-items（横轴）结合使用，而父容器又与flex-direction: column 结合使用。所以在你的情况下它没有效果。删除align-self 并添加height: 100% 即可。

更新 Fiddle（感谢 Michael_B）

参考Flexbox|Codrops Reference

【讨论】：