Question

尝试在评论编号中添加日期并在移动设备屏幕上的列中发布预览。此外，在移动设备屏幕上将带评论的日期带到第一位。

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-direction是row，因此除非您覆盖以前的flex-direction设置，否则无需指定它。

Flexbox项目按列排序

1 个答案: