Question

我的flexbox组合在浏览器之间工作不稳定。

我无法理解为什么一个具有绝对的flexbox父级位置的孩子，不能将元素子项恰好放在中间。目前预期的结果可以在chrome中实现，但Firefox和Safari显示完全不同的结果。

我一直在阅读这篇文章，以了解为什么我在这些浏览器上没有得到我想要的结果。

＆＃13;

.main {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
}
.wrapper {
  position: relative;
  width: 200px;
  border: 1px solid purple;
  height: 60px;
  display: flex;
  justify-content: center;
}

.main   a {
  display: block;
  padding: 1em;
}
.container-flex {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 400px;
  border: 1px solid #444;

}

.item-center-absolute {
  position: absolute;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid tomato;
  bottom: -10px;
}

＆＃13;

<div class="main">
  <div class="wrapper">
    <a href="#">Something</a>
    <div class="container-flex">
      <div class="item-center-absolute"></div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

codepen的结果不同：

https://codepen.io/anon/pen/oGbaGe

.main {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
}
.wrapper {
  position: relative;
  width: 200px;
  border: 1px solid purple;
  height: 60px;
  display: flex;
  justify-content: center;

  a {
    display: block;
    padding: 1em;
  }
}

.container-flex {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 400px;
  border: 1px solid #444;

}

.item-center-absolute {
  position: absolute;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid tomato;
  bottom: -10px;
}

flex浏览器之间的不同行为

0 个答案: