問題描述

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