1

说到 flexbox，Firefox 似乎真的崩溃了。

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

本文旨在指导某人如何使用 flexbox，使其适用于所有浏览器。完整的 HTML 和 CSS 代码在 这里 ，文章是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上述更改？

4

2 回答 2

2

Bugzilla中列出了很多关于 2009 年 Flexbox 实现的错误。这是其中之一。

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

FF 的 css width、min-width、max-width、height、min-height 和 max-height 属性在两个或多个 -moz-box flex 元素上使用百分比值时无法正常工作。[...] 目前，没有解决方法来纠正它。

于 2013-05-31T10:39:02.780 回答
0

至于解决方法，它肯定是一种解决方法......

看来你应该在容器上设置一个宽度。

如果我有：

.container {
    display: flex;
}

我可以通过给容器一个百分比宽度（我更喜欢vw 和 vh 单位）来模仿在 flex 容器的子项上设置百分比宽度的能力，例如：

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

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

.inner-box1 {
    flex: 3;
    margin: [?];
}
.inner-box2 {
    flex: 1;
    margin: [?];
}
于 2015-03-29T02:18:53.660 回答