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 时，它会更改应用它的孩子的高度。

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

Answer 1

除非我们指定某些align属性，否则它将默认auto拉伸内容以填充 Flex，

auto在绝对定位的元素上计算自身，并在所有其他框上计算父元素上的align-items 的计算值（减去任何旧关键字），或者如果该框没有父元素则开始计算。它的行为取决于布局模型，如 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>