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

Question

我正在尝试拉伸 .side-bar div 使其占据整个 window.

的高度

我将 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>

Answer 1

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

更新 Fiddle（感谢Michael_B）

引用Flexbox|Codrops Reference

Answer 2

您已经为弹性项目指定了高度。

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

此身高规则覆盖 align-items 和 align-self () 上的 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>

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

Why is align-self: stretch not working on a flex item?

html

css

flexbox