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>

问题解答

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

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

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

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