Firefox上的CSS显示框和flex

Question

我在css中有一个导航栏，在父级和子级（分别）上使用display: flex;和display: box;。 第一个html元素使用flex，其中：

• .menu-item有一部分
• .submenu-item有4个部分

重新分配是固定的。

然后子菜单使用框，所有设置为box-flex: 1;，以便他们可以使用他们想要的空间。

导航栏可以在Chrome，Safari和IE中进行核心渲染。但Firefox无法正确呈现它。

如何在Chrome中呈现（并且应该在FF中）：

它是如何在FF中实际渲染的：

我有一个Dabblet exemple的错误。

Answer 1

Firefox display:flex;最终justify-content:space-around;需要.dropdon-menu。它使用新语法。 http://css-tricks.com/old-flexbox-and-new-flexbox/ dabblet更新：http://dabblet.com/gist/9468022

EDIT。

justify-content无法满足您的需求，因此请查看flex属性。

您只需将flex:1;设置为.submenu-item：

即可

这里有一些解释：https://developer.mozilla.org/en-US/docs/Web/CSS/flex

结果：http://dabblet.com/gist/9470629