Question

在涉及到flexbox时，Firefox似乎真的崩溃了。

我正在查看此网页，该网页声称显示应该以相同方式在所有主要浏览器上运行的Flexbox代码。所以我下载了代码，当我更改width变量时，FF 21.0什么也没做。但是使用Chrome和IE 10，它确实可以正确地改变布局。

本文旨在指导某人如何使用flexbox，以便它适用于所有浏览器。完整的HTML和CSS代码为here，文章为http://css-tricks.com/using-flexbox/ Using Flexbox: Mixing Old and New for the Best Browser Support

我遇到困难的代码部分是下面的width。如果我将其更改为任何值，FF中没有任何反应。

.main-content {
  -webkit-box-ordinal-group: 2;   /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-ordinal-group: 2;      /* OLD - Firefox 19- */
  -ms-flex-order: 2;              /* TWEENER - IE 10 */
  -webkit-order: 2;               /* NEW - Chrome */
  order: 2;                       /* NEW, Spec - Opera 12.1, Firefox 20+ */

  width: 60%;            /* No flex here, other cols take up remaining space */

  -moz-box-flex: 1;               
  background: white;
}

如何解决这个问题，以便FF能够响应上面width的变化？

Answer 1

Bugzilla中列出了关于2009年Flexbox实施的批次错误。这是其中之一。

https://bugzilla.mozilla.org/show_bug.cgi?id=529761

FF的css宽度，最小宽度，最大宽度，高度，最小高度和使用百分比％值，max-height属性无法正常工作在两个或多个-moz-box flex元素上。 [...]目前，没有任何工作可以纠正它。

Answer 2

就解决方法而言，它当然是一种解决方法......

似乎你应该在容器上设置一个宽度。

如果我有：

.container {
    display: flex;
}

我可以通过给容器增加百分比宽度（我更喜欢vw and vh units）来模仿在flex容器的子容器上设置百分比宽度的能力，例如：

.container {
    display: flex;
    width: 70vw;
}

在里面放置方框是一个简单的游戏，可以找到弹性和边距值的良好平衡......也许：

.inner-box1 {
    flex: 3;
    margin: [?];
}
.inner-box2 {
    flex: 1;
    margin: [?];
}

使用firefox在flexbox内部宽度不起作用

2 个答案: