Question

在下面的代码片段中，我使用的是flexbox布局，我注意到一种我无法理解的奇怪行为。

请注意我要求理论解释为什么会发生这种情况，因为我已经知道了一些解决方法。

问题出现在第一个标题示例中，我有一个容器div（a），然后是2个内联块div（a1，a2）。当a2设置的字体大小小于a1时，a2 DIV会下降一些像素，我希望两个div仍然对齐并具有相同的高度（由标题行高度给出）。您可以看到它在我添加的蓝色顶部边框下降。

如果我删除div'a'并且只将b1和b2移动到标题的子节点，则不会发生此问题，如我示例的第二个标题所示。

我已经尝试过调整一些flex属性而没有运气（对齐项目等）。我也知道line-height有一些奇怪的技巧，有时候并不是很明显，但我不明白为什么会发生这种情况，如果这应该是这样或者是一个bug。

在Chrome 65，Opera 52和IE 11上进行了测试，并在所有版本上进行了测试。

header {
  line-height: 50px;
  background-color: gray;
  font-size: 15px;
  font-family: Arial;
  display: flex;
}

.a1, .a2 {
  border-top: 1px solid blue;
  display: inline-block;
}

.a2 {
  font-size: 8px;
}

.b1, .b2 {
  border-top: 1px solid blue;
}

.b2 {
  font-size: 8px;
}

<header>
  <div class="a">
    <div class="a1">AAAAA1</div>
    <div class="a2">AAAAAAA 2</div>
  </div>
</header>

<p>&nbsp;</p>
<header>
    <div class="b1">AAAAA1</div>
    <div class="b2">AAAAAAA 2</div>
</header>

Answer 1

我认为这是因为默认情况下使用display: inline-block; vertical-align设置为 baseline 。

您可以使用

.a1, .a2 { vertical-align:top; }

或

.a1, .a2 { display:block; float:left }

当font-size小于flexbox布局中的兄弟时，Div向下移动

1 个答案: