Question

我试图拉伸.container{ width:50%; margin:0 auto; text-align:center} .container span{ width:30%; margin:0 1%; } div，使其占据整个窗口的高度。

我向flex容器添加了flex并指定了flex项目的宽度和高度，但是side-bar的高度显示与flex项目相同。

是否因为我的CSS类的顺序？

＆＃13;

.side-bar

＆＃13;

* {
  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;
}

＆＃13;

Answer 1

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

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

此高度规则会覆盖stretch和align-items（here's why）上的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 Reference

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

2 个答案: