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-方向行，所以沒有必要，除非你是覆蓋前一個彎曲方向設置可以指定它。