停止`display: flex`改变孩子的高度

Question

非常简单的设置：

<div class="root">
  <a>Foo</a>
</div>

.root {
  display: flex;
}

a {
  padding: 0.125rem;
}

在开发工具中切换

display: flex

样式会显示

<div>

的内容高度在 22 和 26 像素之间交替。我希望这种情况不会发生，并保持原来的高度。

我已经搞乱了

align-items

、

flex

、

flex-grow

、

flex-basis

等，但似乎没有一个能阻止这种奇怪的大小调整。

Answer 1

只需在 CSS 中的

.root

类中添加一行即可。将

align-items: flex-start;

放在那里。此行告诉

flexbox

不要弄乱您的

<a>

标签的高度

.root {
  display: flex;
  align-items: flex-start;
}

a {
  padding: 0.125rem;
}

<div class="root">
  <a>Foo</a>
</div>