weex - Android 原生Vue.js 使用 justify-content: flex-end; 不起作用
高洛峰
高洛峰 2017-04-18 09:19:51
0
2
851

Android 原生,Vue.js 的属性 justify-content: flex-end; 外面套两层 <p>,就不起作用。备注:web 下是好的。

见代码:
<template>
<p class="page">

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

</p>
</template>
<style scoped>

.page {
    }
.con {    
    background-color:#CCCCCC;
    flex-direction: row;
}
.title{
    margin: 5px;
    flex-direction: column;
    justify-content: flex-end;
    background-color:#FFFFFF;
}
.titleText{
    font-size: 28px;
    background-color:red;
}

.validate{
    margin: 5px;        
    background-color:#CCCCCC;
    height: 100px;
    flex:1;
}
.validateText {    
    font-size: 24px;
    margin:5px;
}

</style>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(2)
左手右手慢动作

Looking at your code, I guess you want to put the "title" at the bottom. First of all, the justify-content attribute is not from vue.js, but from Flexbox. You can try writing like this:

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

If you want multiple people to answer, it is recommended to post the renderings.

巴扎黑

You must first set display to flex before you can use the properties of flexbox, otherwise display:block

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template