Javascript 获取flexbox行的高度

我有一个flexbox容器，每行上的项目都会溢出，然后进入下一行。每个项目都与基线对齐；因此，行的大小可能会有所不同，这取决于哪些项目位于哪一行上以及它们如何与基线对齐

下图中的项目以基线为中心：

我想知道是否有一种方法可以动态获取行高度？或者获取每个项目的基线到行顶部/底部的距离

我希望这样做，以便我可以在项目周围设置悬停状态，允许悬停延伸到项目上方，并使高度一直延伸到每行的顶部，因此每个项目的悬停将如下所示：

我的尝试：

/*在悬停时，我希望它是项目周围的一个框，并使边框的顶部和底部接触到它所在行的顶部/底部*/ .flex项：悬停{ 边框：1px实心暗色； } /*所以不悬停时项目不会移动*/ .弹性项目{ 边框：1px纯色浅蓝色； } .柔性容器{ 溢出：隐藏；位置：相对； 显示：-webkit flex； 显示器：flex； -webkit对齐项目：基线； 调整项目：基线； 宽度：400px； 高度：350px； 背景颜色：浅蓝色； 柔性包装：包装； 填充：10px； } .内包装{ 显示：内联块； 文本对齐：居中； 宽度：100px； 利润率：10px； 背景颜色：矢车菊蓝； } .弹性体{ 边框底部：1px实心fff； } .弹性体更多{ 浮动：左； 清除：左； 宽度：100%； } .flex-img{ 证明内容：中心； 对齐项目：居中； } 柔性标题1 在这里居中 更多文本 弹性标题1更长的标题 在这里居中 更多文本 柔性标题1 在这里居中 更多文本更多文本更多文本 柔性标题1 在这里居中 更多文本 柔性标题1 在这里居中 更多文本

---

我可以通过更改鼠标使悬停效果在所有项目上具有相同的高度

.flex-container {
    align-items: baseline
} 

到

然后，我添加了以下行以使项目垂直对齐：

.flex-item {
    display: flex;
    align-items: center;
}

但是，您的原始代码将这些项对齐为基线而不是中心。。我不知道该怎么做

希望这有帮助

---

codepen:

我可以通过改变鼠标悬停的高度使所有物品的悬停效果保持相同

.flex-container {
    align-items: baseline
} 

到

然后，我添加了以下行以使项目垂直对齐：

.flex-item {
    display: flex;
    align-items: center;
}

但是，您的原始代码将这些项对齐为基线而不是中心。。我不知道该怎么做

希望这有帮助

---

codepen:

尝试将其插入codepen

html

---

试着把这个插入代码笔

html

    /* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
  border: 1px solid darkred;
}

/* so item doesn't move when not hovering */
.flex-item {
  border: 1px solid lightblue;
  outline:1px solid red;
  height:62vh;


}

.flex-container {
  overflow: hidden;    position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: baseline;
  align-items: baseline;
  width: 400px;
  height: 400px;
  background-color: lightblue;
  flex-wrap: wrap;
  padding: 10px;
  flex-direction:column;

}

.inner-wrapper {
  display: inline-block;
  text-align: center;
  width: 100px;
  margin: 10px;
  background-color: cornflowerblue;
}

.flex-body {
  border-bottom: 1px solid #fff;
}
.flex-body-more {
  float: left;
  clear: left;
  width: 100%;
}
.flex-img {
  justify-content: center;
  align-items: center;
}