Flex 项目被撞到前一个项目高度的一半

Question

我将包含上下文图像，然后是代码：

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

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 对我来说只是一个额外的好处。在此先感谢，非常感谢任何帮助或指导！

Answer 1

您需要设置以下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

Answer 2

因为 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时，只有它的children成为弹性项目

Flex 项目被撞到前一个项目高度的一半

Flex item being bumped down exactly half height of previous item

css

vertical-alignment

flexbox