search

Home  >  Q&A  >  body text

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

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>

高洛峰高洛峰2889 days ago856

reply all(2)I'll reply

  • ringa_lee

    ringa_lee2017-04-18 09:21:51

    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.

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-18 09:21:51

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

    reply
    0
  • Cancelreply