用weex怎样得到如下效果?

Question

怎样并排显示以上内容，求指教,谢谢！

用flex布局后，框显示出来了，为什么里边的内容没有显示，这是什么原因？代码如下：

<template>
    <list >
          <cell v-for="name in list" class="row">
               <div>
                  <text class="text">{{name}}</text>
             </div>
          </cell>
      </list>
</template>
<style>
    .row{
        flex:1;
        flex-direction: row;
        height:80px;
        justify-content:flex-start;
        align-items:center;
        background-color:#FFFFFF;
     }
</style>
<script>
 module.exports = {
     data:{
         list:
          ['A', 'B', 'C']
     }
</script>

请问是什么原因？谢谢

Answer 1

weex支持大部分css语法，可以用flex布局试试

Answer 2

flex 可以很简单实现这个布局

Answer 3

weex 规定了display:flex;图片用绝对定位,大致如下：

.header{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    color: #FFFFFF;
    font-weight: 200;
}
.img{
    position: absolute;
    top:10px;
    right: 10px;
}

没有显示数据，是你的写法不对，找不到list。请看控制台报错信息。
我是这样写的：

export default {
        data(){
            return {
                list: ['A', 'B', 'C'],
                  };
        },