CSS3 FlexBox 在 Firefox 22 中无法正确显示答案

【问题标题】：CSS3 FlexBox Doesn't Display Correctly In Firefox 22CSS3 FlexBox 在 Firefox 22 中无法正确显示
【发布时间】：2023-03-14 18:43:01
【问题描述】：

由于某种原因，我在 Firefox 22 中处理的项目无法正确显示。在 webkit 浏览器中运行良好（在 Opera 15 和 Chrome 27 中测试；Safari 直到 7.0 才支持更新的规范）。一切都只是按行分组在一起，所以我的第一个想法是将 flex-direction 更改为列而不是行，但这甚至没有帮助。

* {
margin:0;
padding:0;
}
body {
     background: none repeat scroll 0% 0% #ECF1E1;
     color: #FFFFFF;
     font-size: 100%;
     height: 100%;
     display: flex;
     display: -webkit-flex;
     width:100%;
     flex-flow: row wrap;
     -webkit-flex-flow: row wrap;
     overflow-x:hidden;
}
#content {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px 5px 5px 5px;
     border: 5px outset #FF6600;
     margin: 0% .25%;
     -webkit-flex:2;
     flex: 2;
     padding:0% 1.3%;
}
#login {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-radius: 5px;
     border: 5px outset #FF6600;
     flex:1;     
     -webkit-flex:1;
     padding:10px;
     margin: 0% .25%;   
}
footer#footer {
     background: linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     background: -webkit-linear-gradient(to bottom, rgb(54,156,245) 0%, rgb(16,91,161) 52%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#105BA1', endColorstr='#369CF5',GradientType=0 ); /* IE6-9 */
     border-top: 5px outset #FF6600;
     height: 50px;
     padding: 0% 1%;
     text-align:center;
     clear:both;
     width:100%;
     margin: 2% 0% 0% 0%;
}

它应该是 2 列布局（无论如何在台式机上），但就像我说的那样，所有内容都在 Firefox 22 的页面顶部连续聚集在一起。

【问题讨论】：

根据caniuse，所有最新版本的FF都不支持flex-flow属性
只是弹性流？是否也包括 flex-direction 和 wrap？
我忘了提到 flex-wrap 属性也不支持。 Firefox 正在实现旧版本的 Flexbox 模块。
真的吗？更改日志显示，新规范自 20 版起就受到支持（尽管在 22 版之前处于标记状态）。
Firefox 支持 flex-flow 和 flex-wrap 属性，它不支持启用包装的值。 flex-flow: row nowrap 或 flex-wrap: nowrap 工作，但不是 flex-flow: row wrap 或 flex-wrap: wrap。为什么他们选择继续他们不完整的实施，我无法理解。

标签： css firefox flexbox

【解决方案1】：

Firefox 不支持换行。要对 Firefox 隐藏 Flexbox，直到它最终支持包装，请使用功能查询：

@supports (flex-wrap: wrap) {
    body {
        display: flex;
    }
}

你只需要隐藏 display 属性，没有它所有其他 Flexbox 属性都会被忽略。

【讨论】：

Mozilla 已经承认了这个错误，并且a ticket has been filed to fix it.
更正：Mozilla 承认在他们的 2009 年实现中缺乏包装（但 2009 年的实施无论如何都不支持包装）并表示“不会修复它，因为我们正在开发现代版本”。他们故意选择发布不支持包装的现代 Flexbox 版本。这不是“错误”。
无论您是否想称其为错误，我在评论中链接到的问题表明 Mozilla 已将其提交到 Bugzilla 中，票证 ID 为“Bug 702508”。

【解决方案2】：

好消息是 Mozilla 终于有了fixed it。它已经在 Firefox Nightly build 28.0a1 中运行。据rapid release calendar称，FF28将于2014年3月发货。

【讨论】：

看在上帝的份上！是时候了……谢谢。