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

Question

出于某种原因,我在Firefox 22中工作的项目将无法正确显示.在webkit浏览器中工作正常(在Opera 15和Chrome 27中测试; Safari将不支持更新的规范,直到7.0).所有东西都按行组合在一起,所以我的第一个想法是将flex-direction更改为column而不是row,但这甚至没有帮助.

* {
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中连续在页面顶部聚集在一起.

Answer 1

Firefox不支持包装.要将Flexbox从Firefox隐藏到最终支持包装的那一天,请使用功能查询:

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

您只需要隐藏显示属性,没有它就会忽略所有其他Flexbox属性.