flexbox 在 firefox 中不工作

Question

下面的 flexbox 代码在 firefox 中不起作用。这是一个横跨浏览器宽度的水平导航列表。在所有其他浏览器中，li 的 space 输出相同，但在 firefox 中则不然。有任何想法吗？提前致谢。

.wrapper {
  position: fixed;
  padding: 0;
  width: 100%;
  top: 0em;
}
.flex-container-top {
  padding: 1em;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-item {
  font-family: sans-serif;
  font-size: 1em;
  color: #fff;
  text-align: center;
}

<div class="wrapper">
  <ul class="flex-container-top">
    <li class="flex-item"><a href="#eastsidedin">Link 1</a>
    </li>
    <li class="flex-item"><a href="#eastsidedes">Link 2</a>
    </li>
    <li class="flex-item"><a href="#eastsidedri">Link 3</a>
    </li>
    <li class="flex-item"><a href="#eastsidehap">Link 4</a>
    </li>
  </ul>
</div>

Answer 1

您的示例在 Chrome 中也不起作用。

您需要将 flex: 1 添加到 .flex-item。然后它将起作用：

.flex-item {
  flex: 1; /* add this line */
  font-family: sans-serif;
  font-size: 1em;
  color: #fff;
  text-align: center;
}

flexbox 在 firefox 中不工作

flexbox not working in firefox

navigation

firefox

flexbox