弹性项目被撞到前一个项目的一半高度答案

【问题标题】：Flex item being bumped down exactly half height of previous item弹性项目被撞到前一个项目的一半高度
【发布时间】：2018-01-27 18:18:53
【问题描述】：

我将包含一张图片作为上下文，然后是代码：

最右边带有“ABC”的框和左/下边框正被向下压低到旁边渐变图像高度的一半。我知道很多高度/等没有意义，但我已经将它们全部删除，问题仍然存在。这里有什么指导吗？

HTML：

<div className="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" className="thingImage" />
  <div className="content">
    <span className="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span className="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div className="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" className="thingIcon" />
    <span className="thingAbbrev">ABC</span>
  </div>
</div>

（“className”来自 React，如果你不熟悉 React，就读作“class”）

CSS：

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;

}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  align-self: flex-start;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

对我来说，这个项目的主要重点是学习 React，在这里使用 Flexbox 对我来说只是一个奖励。在此先感谢，非常感谢任何帮助或指导！

【问题讨论】：

标签： css flexbox vertical-alignment

【解决方案1】：

由于thingMeta 不是弹性容器（没有display: flex;⁽¹⁾），thingAbbrev 不是弹性项目，因此 align-self: flex-start 不会不适用。

由于thingMeta 中的img 和span 是正常的内联元素，它们沿基线对齐，因此添加vertical-align: top 将使它们在顶部对齐。

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;
}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  /* align-self: flex-start;               removed  */
  vertical-align: top;                /*   added    */
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

<div class="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
  <div class="content">
    <span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span class="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div class="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="thingAbbrev">ABC</span>
  </div>
</div>

当然，您也可以将display: flex 添加到thingMeta。这样做的缺点是你的img 然后变成了一个弹性项目，并且根据你想用它做什么，有一些跨浏览器问题，其中许多可以通过包装img 来避免（我没有'不在下面的示例中）

.thing{
  border: 1px solid #ccc;
  width: 564px;
  min-height: 68px;
  padding: 10px;
  font-family: "Helvetica", arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  display: flex;
}
.thingImage{
  border-radius: 5px;
  margin-right: 10px;
}
.thingName{
  font-weight: bold;
  margin-right: 0.3em;
}
.thingMeta{
  margin-left: auto;
  align-self: flex-start;
  height: 35px;
  display: flex;                      /*   added    */
}
.thingAbbrev{
  border-bottom: medium solid #000000;
  border-left: medium solid #000;
  align-self: flex-start;
  padding-left: 5px;
  padding-bottom: 5px;
  margin-left: 10px;
  width: 30px;
}
.thingIcon{
  height: 30px;
}

<div class="thing">
  <img src="https://unsplash.it/75/90/?blur" alt="hey there" class="thingImage" />
  <div class="content">
    <span class="thingName">Jibber Jabb Super Long Title of a Movie or Thing Here</span><br/>
    <span class="thingRanks">
       Rank1: 1<br/>
       Rank2: 2<br/>
       Rank3: 2
    </span>
  </div>
  <div class="thingMeta">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="thingAbbrev">ABC</span>
  </div>
</div>

⁽¹⁾当 display: flex 被设置在一个元素上时，只有它的子元素才会成为弹性项目

【讨论】：

这很有帮助。我特别感谢您为告诉我原因所付出的努力。谢谢。

【解决方案2】：

你需要设置下面的CSS和html

CSS：

.vcenter{
  display: flex;
  align-item: center;
  justify-content: center;
}

我还将<span class="thingAbbrev">ABC</span> 包裹在另一个跨度中，以消除由于边距导致的高度问题。

HTML：

  <div class="thingMeta vcenter">
    <img src="https://unsplash.it/30/30/?blur" alt="name" class="thingIcon" />
    <span class="vcenter"><span class="thingAbbrev">ABC</span></span>
  </div>

JSFiddle：here

【讨论】：