问题描述
有时候使用弹性盒子布局会遇到这种场景：在弹性子元素未设置高度时，想让其高度是自适应的状态，而不是被拉伸至同父元素一样的高度，如下图蓝色的区域元素：
红色区域的子元素设置了固定宽高，而绿色的部分未设置具体高度，默认被拉伸了高度,蓝色部分是未设置高度的子元素区域，它的高度未被拉伸(是我们想要的祥子---看到此处两眼冒星星... ^-^)
原因分析
是因为align-items默认值stretch导致的，来看看这个属性的定义吧：
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
-
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
-
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
-
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
-
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
-
stretch：
默认值如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。【注：就是因为这个默认属性值会让未设置高度的弹性子元素被拉伸同父元素一样的高度】
解决方法
弹性盒子还有一个属性：align-self,align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。解决方法就是在需要自适应高度的弹性子元素上设置align-self:flex-start;
以下是这个属性的定义：
align-self
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
语法
align-self: auto | flex-start | flex-end | center | baseline | stretch
各个值解析:
-
auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素设置的'align-items'值，如果其父元素未设置align-items，则计算值为'stretch'。
-
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
-
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
-
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
-
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
-
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
附上代码
<style>
.box{
display: flex;
width: 600px;
height: 300px;
border: 1px solid gold;
}
.box1{
background-color: rgb(250, 167, 167);
width: 200px;
height: 200px;
border: 1px solid rgb(240, 93, 88);
}
.box2{
background-color: #c7f1aa;
width: 200px;
border: 1px solid rgb(24, 230, 76);
}
.box3{
align-self: flex-start;
background-color: #abcdef;
width: 200px;
border: 1px solid rgb(71, 161, 221);
}
</style>
<div class="box">
<div class="box1">设置了固定宽高的弹性子元素</div>
<div class="box2">设置了固定宽度，未设置固定高度，高度被拉伸至父元素的高度</div>
<div class="box3">设置了固定宽度，未设置固定高度，子元素自适应高度</div>
</div>
总结
在需要自适应的弹性子元素中设置align-self:flex-start即可，看情况设置对应的属性值，居上或下喽~
