具体来说，我想知道，在下面的示例中，为什么要设置height第一个弹性项目的值会更改（实际上增加）第一行的高度。
一般来说，我希望能够确定行的高度（我想当弹性容器的高度设置为auto或明确的值）。
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container> :nth-child(1) {
background-color: darkorchid;
height: 60px;
}
.flex-container> :nth-child(2) {
background-color: darkkhaki;
}
.flex-container> :nth-child(3) {
background-color: dodgerblue;
}
.flex-container> :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container> :nth-child(5) {
background-color: darkcyan;
}<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>Flex 容器的初始设置是align-content: stretch。这意味着柔性线（即“行”或“列”）将均匀地扩展容器的横轴。这就是当您没有在项目上设置任何高度时得到的结果：
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container> :nth-child(1) {
background-color: darkorchid;
/* height: 60px; */
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
}<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>在一个容器中height: 200px and align-items: stretch，两行上的 Flex 项目的高度均为 100px。
当您在弹性项目上设置高度时，您会消耗可用空间。仅剩余空间被考虑在内align-content: stretch.
所以在问题中给出了第一项height: 60px。这在横轴上留下了 140px 的可用空间，对吧？好吧，我们就这样吧。该空间在两条线之间平均分配。
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container> :nth-child(1) {
background-color: darkorchid;
height: 60px;
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
}<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>此时，我们应该看到高度为 130 像素的项目 2、3 和 4，以及高度为 70 像素的项目 5。 （第 1 项不参与，因为align-items: stretch不再适用。它已被高度声明覆盖（完整解释).)
但事实并非如此。第一行参与项目的高度为 121px，第二行参与项目的高度为 79px。
为什么？因为可用空间比最初想象的要少。内容本身（文本）具有高度并占用空间。一旦你考虑到文本的高度（无论它是什么，我不知道），这些数字就会加起来。
事实上，在第一个示例（第一个项目上没有定义高度的示例）中，伸缩线高度相等的唯一原因是所有文本都具有相同的字体大小。如果您要更改项目#5 的字体大小，则弯曲线将再次具有不相等的高度。
.flex-container {
display: flex;
flex-wrap: wrap;
width: 400px;
height: 200px;
border: 1px solid black;
align-items: stretch;
}
.flex-container> :nth-child(1) {
background-color: darkorchid;
/* height: 60px; */
}
.flex-container > :nth-child(2) {
background-color: darkkhaki;
}
.flex-container > :nth-child(3) {
background-color: dodgerblue;
}
.flex-container > :nth-child(4) {
background-color: darkgoldenrod;
}
.flex-container > :nth-child(5) {
background-color: darkcyan;
font-size: 2em; /* demo */
}<div class="flex-container">
<span>I am number 1</span>
<div>I am number 2</div>
<div>I am number 3</div>
<div>I am number 4</div>
<span>I am number 5</span>
</div>更多细节：