Question

感谢这里（How do I determine the height of a row?的问题的答案，我现在理解（看下面的示例）通过在第一个flex-line的flex-item上将显式高度设置为60px显着降低了高度align-content: stretch必须“播放” 200像素（容器的高度）到140像素。由于有2条弹性线，因此将其分成两半，以使第一个弹性线为70px，第二个弹性线为70px。现在，第一条伸缩线的高度具有该行上最高的伸缩项的高度（60像素）加上70像素以得到130像素。第二条折线的高度为70px。

实际上，每条弹性线的高度略有不同（第一条弹性线的高度大约为122像素，第二条弹性线的高度大约为78像素），有人告诉我这与文本内容的高度有关。 / p>

有人可以详细说明吗？

.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行的高度，我们只需找到可用空间。

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

假设我们知道每条折线中所有最高折线项目的高度，然后按照公式

可用空间：容器高度-所有最高弹性项目高度的总和
平均分布的可用空间：可用空间/伸缩线数

然后，我们将Equally Distributed free space加上最高弹性项目高度的高度，然后将得出该弹性线的高度。

示例

参数：

容器高度为300px
3条柔性线
第一行中最高的flex项目的高度为30px
第二条柔性行中最高的柔性项目的高度为20px
第三条折线中最高的折线项目的高度为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-wrap:wrap;时，行数将一直更改

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

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

我可以想到两种方法：

第一种方法

应用align-items:flex-start并仅获取所有弹性项目的高度并进行比较，然后重置回align-items:stretch

第二种方法

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

如果有设定的高度，只需获得该高度即可。

要确定实际文本的高度，有很多要考虑的地方，

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

如何确定折线的高度？

1 个答案: