flex-startstretchalign-items.container {
height: 500px;
padding: 10px;
margin: 50px auto;
background: #eee;
display: flex;
align-items: flex-end
}
.container .box {
padding: 10px;
width: 200px;
height: 200px;
background-color: #fff;
}<div class="container">
<div class="box"></div>
</div>如果您为元素设置高度，您将不会看到任何差异。
伸展
Flex 项目被拉伸，使得项目边距框的交叉尺寸与线相同 同时遵守宽度和高度限制。ref
在您的情况下，由于您设置的高度，拉伸不会发生任何事情。
弹性启动
弹性项目的交叉起始边距边缘与线的交叉起始边缘齐平。 参考
这只是将项目对齐到顶部。同样，视觉上不会发生任何事情，因为它在某种程度上是默认行为（不是默认值）。
.container {
display:inline-flex;
width:200px;
height:200px;
border:2px solid;
}
.container > span {
width:100px;
height:100px;
background:red;
}<div class="container" style="align-items:flex-start">
<span></span>
</div>
<div class="container" style="align-items:stretch">
<span></span>
</div>现在删除高度限制，您将看到差异：
.container {
display:inline-flex;
width:200px;
height:200px;
border:2px solid;
vertical-align:top;
}
.container > span {
width:100px;
min-height:100px;
background:red;
}<div class="container" style="align-items:flex-start">
<span></span>
</div>
<div class="container" style="align-items:stretch">
<span></span>
</div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hashis</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.parrent{
display: flex;
height: 300px;
border: 2px solid black;
align-items: flex-start;
/* align-items: stretch; */
background-color: aqua;
}
.child1{
border: 2px solid black;
background-color: rgb(20, 246, 61);
width: 200px;
}
.child2{
border: 2px solid black;
background-color: skyblue;
width: 200px;
}
</style>
</head>
<body>
<div class="parrent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
</html>