Flexbox 项目在列中的顺序

Question

此处为直播链接http://soloveich.com/pr6/blog/

尝试将日期与 cmets 编号并在移动屏幕上的列中发布预览。此外，在移动屏幕上将带有 cmets 的日期放在首位。

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