为与基线对齐的行中的弹性项目添加边框答案

【问题标题】：adding border to flex items in a row aligned to baseline为与基线对齐的行中的弹性项目添加边框
【发布时间】：2016-09-12 19:18:18
【问题描述】：

问题：如何让边框拉伸到父单元格的高度并围绕子单元格。鉴于我正在使用 flexbox 并与基线对齐。

这可以用所有的 css 完成吗？

更多详情： 我正在使用弹性框将每行中的项目与某个基线对齐。以下图中“center here”下的每个单元格为中心：

当我当前将鼠标悬停在每个项目上时，它会悬停在每个单元格周围有 10px 边距的实线：

我希望悬停时的边框在悬停时延伸到行的顶部和底部，如下所示：

这样当我将鼠标悬停在每个项目上时，它们的悬停边框框会像这样排列：

^ 如果我在每个单元格上打开悬停，这就是我希望它看起来的样子。

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>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您需要根据弹性项目调整一些规则：

.flex-item {
    border: 1px solid lightblue;
    transition: .7s;
    display: flex;
    align-items: flex-end;
}

.flex-container {
    overflow: hidden;
    position: relative;
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 350px;
    background-color: lightblue;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: flex-start;
}

参见下面的代码 sn-p：

/* 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;
    transition: .7s;
    display: flex;
    align-items: flex-end;
}

.flex-container {
    overflow: hidden;
    position: relative;
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 350px;
    background-color: lightblue;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: flex-start;
}

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

【讨论】：

这与我正在寻找的内容很接近...但是我确实需要使这些项目与它们的基线对齐。将项目与中心对齐违反了问题的前提。
@duebstep 哇！无论如何都没有违反这个问题的意思:)我知道你提到了“基线”，但我实际上是把你的最后一张图片作为参考。再看看答案，我已经更新它以将项目与基线对齐（技术上flex-end）。棘手的部分是有问题的元素的“拉伸”，您可以通过简单地调整 align-items 类上的 align-items 规则来调整对齐方式
如果可以的话，我会使用它们，它们将项目居中到“居中”的行；但是它并没有将它们集中在那里。它具有不同的输出，将它们集中在每个项目的不同点。感谢您的尝试！让我知道你是否能想到解决办法！
@duebstep 哦，不，问题，嘿，只要有足够的时间，总有一种工作可以考虑。对齐方式也不像您推断的那样随机。它们都是基线，如果您需要对齐以引用另一个锚点（即：flex-body），那么只需在不同元素上尝试flex 样式，直到获得所需的最终结果（您可能必须对重组您的html 以帮助您到达那里）。不过我相信你会弄明白的，祝你好运！