獲取flexbox行的高度

Question

我有一個flexbox容器，其中每一行上的項目都會溢出，然后轉到下一行。 每個項目都與基准對齊； 因此，行可以具有不同的大小，具體取決於行上的項目以及它們與基線的對齊方式。

如下圖所示，這些項目以基線為中心：

我想知道是否有一種方法可以動態獲取行高？ 還是獲得從每個項目的基線到行的頂部/底部的距離？

我想這樣做，因此我可以在項目周圍設置懸停狀態，以使懸停可以在項目上延伸，並使高度一直到每一行的頂部，因此，每個項目的懸停如下所示：

我的嘗試： codepen

 /* 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; } .flex-container { overflow: hidden; position: relative; display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; width: 400px; height: 350px; background-color: lightblue; flex-wrap: wrap; padding: 10px; } .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; } 

  <div class="flex-container"> <div class="flex-item"> <div class="inner-wrapper"> <div class="flex-title">flex title1</div> <div class="flex-img"> <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'> </div> <div class="flex-body">center here</div> <div class="flex-body-more">more text</div> </div> </div> <div class="flex-item"> <div class="inner-wrapper"> <div class="flex-title">flex title1 longer title</div> <div class="flex-img"> <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'> </div> <div class="flex-body">center here</div> <div class="flex-body-more">more text</div> </div> </div> <div class="flex-item"> <div class="inner-wrapper"> <div class="flex-title">flex title1</div> <div class="flex-img"> <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'> </div> <div class="flex-body">center here</div> <div class="flex-body-more">more text more text more text</div> </div> </div> <div class="flex-item"> <div class="inner-wrapper"> <div class="flex-title">flex title1</div> <div class="flex-img"> <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'> </div> <div class="flex-body">center here</div> <div class="flex-body-more">more text</div> </div> </div> <div class="flex-item"> <div class="inner-wrapper"> <div class="flex-title">flex title1</div> <div class="flex-img"> <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'> </div> <div class="flex-body">center here</div> <div class="flex-body-more">more text</div> </div> </div> </div> 

Answer 1

我可以通過更改使所有項目上的懸停效果高度相同

.flex-container {
    align-items: baseline
} 

至

.flex-container {
    align-items: strech
}

然后我添加了以下幾行以使項目垂直對齊：

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

但是，您的原始代碼是將這些項目“基線”而不是“中心”對齊。.我不知道該怎么做。

希望這可以幫助。

codepen： https ：//codepen.io/bottlecap/pen/pEgbNx

Answer 2

嘗試將其插入Codepen。

html

    <div class="flex-container">
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1 longer title</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text more text more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
  <div class="flex-item">
    <div class="inner-wrapper">
      <div class="flex-title">flex title1</div>
      <div class="flex-img">
        <img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
      </div>
      <div class="flex-body">center here</div>
      <div class="flex-body-more">more text</div>
    </div>
  </div>
</div>

的CSS

    /* 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;
}