Weex：网页在Web中显示正确，但在iOS设备中不正确

Question

我使用weex启动一个项目，login.vue类似于：

<template>
  <div class="login">
    <div class="images">1
    </div>
    <div class="centerPart">2
    </div>
    <div class="agree">3</div>
  </div>
</template>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  background-color: red;
}
.login :first-child{
  height: 250px;
}
.login :last-child{
  height: 200px;
}
.images {
  flex: 0 0 auto;
  background-color: aqua;
}
.centerPart{
  flex: 1 0 auto;
  background-color: yellow;
}
.agree {
  flex: 0 0 auto;
  background-color: coral;
}
</style>

<script>

</script>

当我运行npm start时，它在浏览器中显示如下：

但是，当我运行weex run ios时，模拟器会显示一个空白页面：

我也在设备中尝试过，它也显示空白页。

所以想知道为什么它在模拟器中变成空白，如何找出原因？

Answer 1

Weex目前尚不支持完整的flex速记语法。您只能指定flex-grow部分。

在您的示例中，在flex: 1;中使用.centerPart，它应该调整其高度。

Answer 2

也许您可以尝试将其添加为您的样式

width: 750px;
flex: 1;

750px是所有设备的宽度，weex使用默认的flex布局