事情的经过是这样的，我在flex容器的子元素中没有设置高度，其高度是按照该子元素的子元素（父元素的孙子元素）内容撑开。
同时我在其同级的子元素下渲染了一个同样没有设置高度的不同ui（假定它没有任何内容），那么它的高度将会自动拉伸到和其他flex布局下的子元素相同，且以最高的子元素（即父元素高度）为基准。原因放在后面了，大家耐心看完哈~
举几个例子：
案例1：
1.准备一个flex父元素
2.准备1个无内容，无高度的子元素
3.准备1个有内容，无高度的子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex {
display: flex;
}
/* 给所有box一个背景色和宽度以及间距 */
.box {
width: 200px;
margin: 0 8px 16px;
background-color: skyblue;
}
/* 单独给box2设置高度和背景色，注意box1没有设置高度 */
.box2 {
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="flex">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>
</html>
我们看一下运行效果：
惊奇的发现，box1即使没有设置高度也被拉伸至和box2一样的高度300px。
案例2：
1.flex布局
2.box1，box2都不设置高度
3.box1 无内容，box2有内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex {
display: flex;
}
/* 给所有box一个背景色和宽度以及间距 */
.box {
width: 200px;
margin: 0 8px 16px;
background-color: skyblue;
}
/* 给box2的内容一个高度 */
.box2-content {
height: 400px;
background-color: #666;
}
</style>
</head>
<body>
<div class="flex">
<div class="box box1"></div>
<div class="box box2">
<div class="box2-content"></div>
</div>
</div>
</body>
</html>
可以看到box1同样被拉伸到了和box2内容一样的高度400px。
案例3：
1.flex布局
2.box1无高度 box2 300px高度 box3 400px 高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.flex {
display: flex;
}
/* 给所有box一个背景色和宽度以及间距 */
.box {
width: 200px;
margin: 0 8px 16px;
background-color: skyblue;
}
.box2 {
height: 300px;
}
.box3 {
height: 400px;
}
</style>
</head>
<body>
<div class="flex">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
</body>
</html>
可以看到box1和box3拥有一样的高度了。
原因：
那么为啥会发生这种事情呢？我去查阅了一下相关资料。
好家伙，发现一个知识盲区。
这种情况的产生居然是跟align-items这个flex属性有关的。
我们平时使用align-items只知道它可以控制flex子元素的垂直方向对齐方式，我们使用的最多的是align-items：center，可以垂直对齐。
但是这个属性，不仅仅只有center，还有start，end。
举一反三我们知道start和end的效果。
但注意了，它还有两个效果：stretch和baseline 。
我们先来看看baseline效果：
这个效果一般不是太常用。
最后再说说stretch效果（划重点）：
这个效果是flex的默认效果，换句话说，当你的父元素（flex容器）没有设置align-items属性，那么它默认则为stretch。这时，当你的子元素高度没有设置或者高度为auto时，子元素将会自动拉升至和父元素相同的高度。
那么我们一开始的问题也就得到了解释，如果你也学到了的话，请点个赞吧~