Android 原生Vue.js 使用 justify-content: flex-end; 不起作用

Question

使用 weex-hackernews 构造 Android 原生 ，Vue.js 的属性 justify-content: flex-end; 外面套两层 <div>，居底不起作用，见图1。浏览器访问，可以居底，见图2。

见代码：
<template>

<div class="page">
    <div class="con">
        <div class="title">
            <text class="titleText">标题 ppp ...</text>
        </div>
        <div class="validate">
            <text class="validateText">内容 内容 内容 内容 容 内容 内容 内容 容 内容容 内容 内容 内容 容 容 内容 内容 内容 容 内容容 内容 内容 内容  内容 内容 容 内容 内容 内容 容 内容 内容 内容 容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 ... ...</text>
        </div>
    </div>
</div>

</template>
<style scoped>
.page {
}
.con {

background-color:#CCCCCC;
flex-direction: row;
justify-content: flex-end;

}
.title{

margin: 5px;
justify-content: flex-end;
align-items: flex-end;

}
.titleText{

font-size: 28px;
background-color:red;

}

.validate{

margin: 5px;
background-color:#CCCCCC;
flex:1;

}
.validateText {

font-size: 24px;
margin:5px;

}
</style>

不能上传图片，略。

Answer 1

看你的代码，猜想是想让“标题”置底。首先justify-content属性不是vue.js的，是Flexbox的。你可以尝试这样写：

.title{
    margin: 5px;
    flex-direction: column;//默认就是column 不需要写
    justify-content: flex-end;//主轴方向上排列在容器后面，可以考虑不写，用下面
    align-items:flex-end;//下对齐
    background-color:#FFFFFF;
}

如果想要多人回答，建议将效果图贴出来。

Answer 2

先得 display为flex,才能使用flexbox的属性,不然是display:block