Question

我一直在玩flexbox属性，看看他们能做些什么：

display：flex;
flex-grow：n;
align-items：center;
justify-content：center;

然而，我遇到了一些意想不到的行为，我希望有人可以为我澄清。在悬停伪选择器上操作flex定位元素的以下属性之一：

文字大小
字体重量
文字阴影

元素的相对权重似乎是重新测量的，因此元素的位置会跳跃。如果您反复在顶部两个或底部两个元素之间来回悬停，则可以将其权重减少到基本为零。一个jsfiddle来说明：

https://jsfiddle.net/b8bjv70f/8/

（一个项目数量增加一倍：https://jsfiddle.net/b8bjv70f/9/）

以及相应的代码：

[HTML]

  <div class="container">
    <div class="item one">
      <a href="#">Item 1</a>
    </div>
    <div class="item two">
      <a href="#">Item 2</a>
    </div>
    <div class="item three">
      <a href="#">Item 3</a>
    </div>
  </div>

[CSS]

div.container {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  /* */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
div.item {
  background-color: rgbA(0, 0, 0, 0.05); outline: 1px solid white;
  /* */
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
div.item a {
  padding: 1em 2em;
  font-family: 'sans-serif'; font-size: 1em;
  text-transform: uppercase; text-decoration: none;
  color: rgbA(150, 150, 150, 1.00); background-color: rgbA(255, 255, 255, 1.00); outline: 1px solid white;
}
div.one a:hover { text-shadow: 0 0 1em black; }
div.two a:hover { font-weight: bold; }
div.three a:hover { font-size: 1.5em; }

Answer 1

在发布此问题之前，我没有机会测试多个环境，但事实证明我只能重现Chrome OS上的奇怪行为，特别是构建48.0.2564.48 beta 64位。 Windows上的标准Chrome 47没有问题。

查看以下录音以查看我所看到的内容：

https://drive.google.com/file/d/0B6dJsjhml2eYb0thREc5S2J3Tnc/view

此时我认为此问题特定于Chrome操作系统或Chrome测试版渠道。如果我有时间，这是不可能的，我会进行调查，直到我有信心向Google Code提交Chromium问题...否则，希望其他人会看到这个，然后选择我离开的地方。

我明天会将此标记为已接受的答案，除非其他人在此期间提供更全面的解决方案。

在悬停时操作文本外观时，弹性定位元素的意外行为

1 个答案: