如何确定行的高度？答案

【问题标题】：How do I determine the height of a row?如何确定行的高度？
【发布时间】：2020-10-02 18:07:05
【问题描述】：

具体来说，我想知道，在下面的示例中，为什么将height 值设置为第一个弹性项目会改变（实际上增加）第一行的高度。

一般来说，我希望能够确定一行的高度（我想当 flex-container 的高度设置为 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>

【问题讨论】：

我知道一个完美的问题来详细说明这个......现在需要找到它-.-。作为一个快速的解释，你从 200px 中删除 60px （以获得 140px 作为可用空间（少一点，因为你必须考虑绿色的文本）然后你把它分成 2 （70px），这将使第一行大约 60px + 70px第二个大约 70px
找到它，考虑阅读两个答案以获得不同的观点，您将了解 align-content 如何控制这一切
@Temani Afif 你的答案似乎不对。首先代码给出了 3 行而不是 2，其次问题是为什么使第一个元素的高度为 60px，从而使 seconfd 元素的高度大于 60px？
@TemaniAfif，虽然副本确实为理解这个问题提供了一些指导，但我认为在这种情况下更具体的答案会很有用。
@DCR 您在哪个浏览器中看到 3 行？只有两条，它们称为 flex lines，如果您检查拉伸元素的高度，您会发现我的计算是正确的。不完全一样，因为我做了一个快速的解释（我们还需要考虑内容）

标签： html css flexbox

【解决方案1】：

正如您设置flex-wrap: wrap。当您在其中添加具有不同宽度和高度的元素时，它可能会导致 flex-container 出现非常意外的行为。因此，当您向 flex-container 添加新项目时，获取第一行的高度变得更加困难。

在您的代码中，flex-container 的特定高度为 200 像素，宽度为 400 像素。这意味着，无论 flex-container 包含多少元素，它都不会溢出给定的宽度和高度。 flex-container 中的每个项目都会尝试覆盖可用空间。

由于align-items: stretch，每一行都将具有最大高度的元素的高度。这就是为什么设置一个项目的高度可能并不总是影响行的高度。

【讨论】：

同样的问题，即使你删除了 align-items:stretch

【解决方案2】：

.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: 100%;   
}

.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;
        height: 100%;
}

 <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>

【讨论】：

这甚至是如何开始回答这个问题的？
请解释更多
你需要解释更多。您添加了一个仅代码答案，我们不确定这是在回答什么问题。

【解决方案3】：

弹性容器的初始设置是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 和align-items: stretch 的容器中，两行上的弹性项目的高度均为100 像素。

当您在弹性项目上设置高度时，您正在消耗可用空间。只有剩余的空间会被计入align-content: stretch。

所以在问题中，第一项是height: 60px。这会在横轴上留下 140 像素的可用空间，对吧？好吧，让我们开始吧。该空间在两条线之间平均分配。

.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 不再适用。它已被高度声明 (full explanation) 覆盖。）

但事实并非如此。第一行参与项目的高度为 121px，第二行为 79px。

为什么？因为可用空间比最初想象的要少。内容本身（文本）具有高度并占用空间。一旦你考虑到文本的高度（不管它是什么，我不知道），这些数字就会加起来。

事实上，在第一个示例（第一个项目上没有定义高度的那个）中，伸缩线的高度相等的唯一原因是所有文本都具有相同的字体大小。如果您要更改项目 #5 的字体大小，则 flex 行的高度将再次不相等。

.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>

更多细节：

【讨论】：

据我所知，align-content: stretch 将（尝试）让每一行占据相同的空间（因为它占据了容器的高度）。通过在一个项目中指定高度（60 像素），这会从 align-content 必须使用的交叉大小中减去（给它 140 像素，每行分成 70 像素）。第一行（或 flex-line？）的高度将是 70px 加上其最高网格项的额外高度 - 60px，即 130px。我不明白为什么还要添加文本的（行-？）高度，因为文本肯定在内容的高度（60px）之内？
是的，但是第 1 项没有参与（请参阅我的回答中的第 5 段）。文本的高度仅适用于其他项目。
当我们将文本的高度考虑在内时 1. 什么构成文本的高度？线高？ 2. 您能否在（我的）示例中向我展示如何考虑文本的高度，即使它只是假设的数字？
@tonitone106 您提出的新问题与这个问题没有什么不同，实际上完全相同。如果您需要更多详细信息，则不应提出新问题，您应该编辑此问题，以便我们可以在此处继续回答并将所有详细信息集中在一个地方。现在我们有 2 个相同的问题来处理在不同地方有答案的同一件事（+ 我最初用作重复的问题）。此外，您接受的答案也不准确，因为它与字体大小无关，而是与行高有关。字体大小不起作用（添加 line-height:0 看看会发生什么）
@tonitone106 这是您获得精确计算所缺少的部分：stackoverflow.com/a/61835863/8620333 在那里您将找到当高度设置为自动时如何识别块元素的高度。