css - Flexbox align-self 正在改变 div 的高度

Question

我有一个像这样的 flexbox 设置

.container {
display: flex;
min-height: 300px !important;
}
.space-between {
justify-content: space-between;
}
.align-end {
align-self: flex-end;
}
.align-center {
    align-self: center;
}

<div class="container space-between">
        <div class="child" style="max-height: 100px"></div>
        <div class="child yellow-div" style="max-height: 50px"></div>
        <div class="child blue-div" style="max-height: 150px"></div>
        <div class="child pink-div"></div>
</div>

问题是，当我尝试通过将 align-end 应用于 child#2 并将 align-center 应用于 child#3 来将 align-self 设置为 end 或 center 时，它会更改应用它的 child 的高度。

任何解释为什么会发生这种情况以及可能的解决方法？谢谢

Answer 1

除非我们指定一些 align 属性，否则它将默认为 auto 这将拉伸(stretch)内容以填充 flex，

auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self.

因此，在您的情况下，一旦您更改 align 属性，如果没有应用特定高度，它会将其高度更改为 auto(采用内容高度)。

请检查以下代码段。我已将 align-self 应用于所有子项，然后将第二个子项的值更改为 stretch

.container {
display: flex;
min-height: 300px !important;
}
.space-between {
justify-content: space-between;
}
.child{
 width: 100px; 
 border: 1px dotted red;
 align-self: baseline;
}
.align-end {
align-self: flex-end;
}
.align-center {
    align-self: center;
}
.yellow-div{
  background: yellow;
  align-self: flex-end;
}
.yellow-div+div{
  align-self: stretch;
}
.blue-div{
  background: blue;
  align-self: center;
}
.pink-div{
  background: pink;
}

<div class="container space-between">
        <div class="child yellow-div" style="max-height: 50px"></div>
        <div class="child" style="max-height: 100px"></div>
        <div class="child blue-div" style="max-height: 150px"></div>
        <div class="child pink-div"></div>
</div>