如何确定柔性线的高度？ [复制]

Question

感谢我在此处 (How do I determine the height of a row?) 对我的问题的回答，我现在明白（查看下面的示例），通过在第一个 flex 行中的 flex-item 上设置 60px 的显式高度，它可以降低高度align-content: stretch 必须从 200 像素（容器的高度）到 140 像素“播放”。由于有 2 条 flex-line，它被分成两半，第一个 flex-line 为 70px，第二个 flex-line 为 70px。现在第一个 flex-line 的高度是该行上最高的 flex-item 的高度（60px）加上 70px 得到 130px。第二条flex-line的高度是70px。

实际上，每个 flex-line 的高度略有不同（第一个 flex-line 大约 122px，第二个 78px）我被告知这与文本内容的高度有关。

有人能详细说明吗？

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 200px;
  border: 1px solid black;
}

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

Answer 1

编辑了与Temani Afif's 相关的整个答案，我什至没有考虑过。

---

要确定多行伸缩容器中单条伸缩线的高度，我们只需要找到空闲空间。

要找到可用空间，我们需要在应用拉伸之前找到每行中最高 flex 项的高度。

假设我们知道每个 flex 行中所有最高 flex 项目的高度，然后我们遵循公式

1. 可用空间：容器高度 - 所有最高 flex 项高度的总和
2. 平均分布的可用空间：可用空间/柔性线数

然后我们获取Equally Distributed free space 并将最高的 flex 项的高度添加到它的高度，这将给我们该 flex 线的高度。

---

示例

参数：

• 容器高度为300px
• 3 条柔性线
• 第一个 flex 行中最高的 flex 项的高度是 30px
• 第二个 flex 行中最高的 flex 项的高度是 20px
• 第三个 flex 行中最高的 flex 项的高度是 70px

---

可用空间为180px

Free Space: Container height - Sum of all tallest flex item's heights
300px - (30px + 20px + 70px) = 180px

平均分配的可用空间是60px

Equally Distributed free space: Free space / Number of flex lines
180px / 3 = 60px

现在我们将平均分布的可用空间添加到每行中最高 flex 项的高度

• 第一条柔性线的高度是30px + 60px = 90px
• 第二条柔性线的高度是20px + 60px = 80px
• 第三条柔性线的高度是70px + 60px = 130px

[flex]{
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    width: 200px;
    background-color: #0000008f;
/*     align-items:flex-start; */
}

[flex] * {
    width: 100px;
}

[flex] :nth-child(1) {
    background-color: darkorchid;
}

[flex] :nth-child(2) {
    background-color: darkkhaki;
    height: 30px;
}

[flex] :nth-child(3) {
    background-color: dodgerblue;
}

[flex] :nth-child(4) {
    background-color: darkgoldenrod;
    height: 20px;
}

[flex] :nth-child(5) {
    background-color: darkcyan;
}

[flex] :nth-child(6) {
    background-color: darkred;
    height: 70px;
}

<div flex>
  <div></div>
  <div>height : 30px</div>
  <div></div>
  <div>height : 20px</div>
  <div></div>
  <div>height : 70px</div>
</div>

使用 devTool 检查拉伸的 flex 项的高度。

---

现在我们知道如何计算弹性线的高度了，我们只需要找到参数。

容器高度

这很简单，如果我们没有在容器上设置高度，它将等于内容，因此最高的 flex 项将定义 flex 线的高度，如果容器高度为更短。

---

弯曲线数

这可能很棘手，因为flex-wrap:wrap; 的行数会一直变化

---

每条伸缩线中最高伸缩项的高度

这是最重要的信息，也是最难找到的

我能想到的方法有两种：

第一种方法

应用 align-items:flex-start 并简单地获取所有弹性项目的高度并比较它们，然后重置回 align-items:stretch

第二种方法

我们需要在align-items:stretch 之前获取所有弹性项目的高度，这是文本的高度或者是否有设置的高度。

如果有设定的高度，只需得到那个高度。

要确定实际文字的高度需要考虑很多因素，

1. 有多少行文字
2. 行高
   • 如果line-height:normal; 帐户为font-family 和font-size
   • 如果line-height:1; （无单位值） 占font-size
   • 如果line-height:30px;（固定值）只占line-height
   • 如果line-height:30%; （相对值） 占父母的font-size
3. 任何可以增加高度的 CSS 属性，例如嵌套内联元素上的 padding border vertical-align
4. 可能还有更多，我将在以后的编辑中添加到此列表中。