html - 列中的 Flexbox 元素顺序

Question

实时链接在这里 http://soloveich.com/pr6/blog/

尝试在移动屏幕的列中添加日期和评论编号并发布预览。此外，在移动屏幕上将带有评论的日期置于首位。

奇怪的是，它在分辨率模拟器上完美运行，但在手机(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-direction 是行，因此无需指定它，除非您要覆盖之前的 flex-direction 设置。