Flexbox的物品订购

Question

列在这里 http://soloveich.com/pr6/blog/

活链接试图把最新与评论数量和张贴栏预览手机屏幕上。此外，在移动屏幕上将带有评论的日期放在第一位。

Weridly，它完美对决议仿真器，但没有发生在手机（iPhone和老SGS）

的Html

<div class="postpreview">  
<div class="psto"></div> 
<div class="datencomments"></div> 
</div> 

加任何内部

CSS

.postpreview { 
display: flex; 
display: -webkit-flex; 
display: -moz-flex; 
flex-direction:row; 
-webkit-flex-direction:row; 
-moz-direction:row; 
} 

.psto { 
flex:5; 
-webkit-flex:5; 
-moz-flex:5; 
} 

.datencomments { 
flex:2; 
-webkit-flex:2; 
-moz-flex:2; 
vertical-align: top !important; 
margin-top: 15px; 
} 

@media screen and (max-width: 380px) { 
.postpreview { 
display: flex; 
display: -webkit-flex; 
display: -moz-flex; 
flex-direction:column; 
-webkit-flex-direction:column; 
-moz-direction:column; 
} 
} 

无法弄清楚它是否是我的CSS（为什么它会在模拟器中工作那么？）或移动浏览器的问题

Answer 1

大多数移动浏览器只支持旧的2009 Flexbox属性。您的代码应该是这样的：

.postpreview { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
} 

.psto { 
    -webkit-box-flex: 5; 
    -moz-box-flex: 5; 
    -webkit-flex: 5; 
    -ms-flex: 5; 
    flex: 5; 
} 

.datencomments { 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
    -webkit-flex: 2; 
    -ms-flex: 2; 
    flex: 2; 
    vertical-align: top !important; 
    margin-top: 15px; 
} 

@media screen and (max-width: 380px) { 
    .postpreview { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    } 
} 

还要注意的是默认的Flex-方向行，所以没有必要，除非你是覆盖前一个弯曲方向设置可以指定它。