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

获取flexbox行的高度

2 个答案: