weex官网Flxbox布局指南

Flex练习demo1

http://dotwe.org/vue/24dd81eb26bf0f32cefaf4880a76d47b

<template>
  <div class="root">
    <div class="top">
      <div class="topLeft">
        <text class="smallText">holder</text>
        <text class="smallText">扫一扫</text>
      </div>
      
      <div class="topMiddle">
        <input class="searchInput" type="text" maxlength="210" placeholder="搜索商品，共8888款好物"></input>
      </div>
      
      <div class="topLeft">消息消息
        <text class="smallText">holder</text>
        <text class="smallText">消息</text>
      </div>
      
    </div>
    
    <div class="bottom">
      <input class="searchInput2" type="text" maxlength="210" placeholder="搜索商品，共8888款好物"></input>
      <text class="searchInput">搜索商品，共8888款好物</text>
    </div>
  </div>
  <!--<div class="wrapper" @click="update">-->
  <!--  <image :src="logoUrl" class="logo"></image>-->
  <!--  <text class="title">Hello {{target}}</text>-->
  <!--  <text class="desc">Now, let's use vue to build your weex app.</text>-->
  <!--</div>-->
</template>

<style>
  .root { flex-direction: column; background-color: #c6c6c6;}
  .top { flex-direction: row; background-color: #c2c2c2; }
  .bottom { height: 200px;}
  
  .topLeft { flex-direction: column; justify-content: flex-start;
   align-items: center; background-color: #ff0000; flex: 1;}
  .topMiddle {flex-direction: column; background-color: #00ff00; 
    flex: 3; 
  }
  .topRight { flex-direction: column; justify-content: center; background-color: #0000ff; 
    flex: 1; align-items: flex-start;
  }
  
  .smallText {font-size: 12; color: #ffffff; }
  
  .searchInput { background-color: #c2c2c2; padding: 20px; margin: 0px; flex:1; text-align: center; }
  
  .searchInput2 { background-color: #123456; padding: 20px; margin: 0px; flex:1; text-align: center; }
  
  .wrapper { align-items: center; margin-top: 520px; }
  .title { padding-top:40px; padding-bottom: 40px; font-size: 48px; }
  .logo { width: 360px; height: 156px; }
  .desc { padding-top: 20px; color:#888; font-size: 24px;}
</style>

<script>
  export default {
    data: {
      logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
      target: 'World'
    },
    methods: {
      update: function (e) {
        this.target = 'Weex'
        console.log('target:', this.target)
      }
    }
  }
</script>

总体练习demo2

http://dotwe.org/vue/24dd81eb26bf0f32cefaf4880a76d47b

<template>
    <div class="divclass">

        <div class="divclass1">
            <text class="title1">{{imageList[0].title}}</text>
            <text class="title2">{{imageList[1].title}}</text>
            <text class="title3">{{imageList[2].title}}</text>
        </div>

        <div class="divclass2">
            <text class="title11">{{imageList[0].title}}</text>
            <text class="title22">{{imageList[1].title}}</text>
            <text class="title33">{{imageList[2].title}}</text>
        </div>


        <div class="divclass3">
            <text class="title111">{{imageList[0].title}}</text>
            <text class="title222">{{imageList[1].title}}</text>
            <text class="title333">{{imageList[2].title}}</text>
        </div>

    </div>
</template>

<style>
    .divclass {
        flex: 1;

    }

    .divclass1 {
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
        background-color: black;
        /*height:100px;*/
        flex: 2;

    }

    .divclass2 {
        flex-direction: column;
        justify-content: center;
        background-color: gray;
        /*height:100px;*/
        flex: 5;

    }

    .divclass3 {
        flex-direction: column;
        align-item: center;
        background-color: yellow;
        /*height:100px;*/
        flex: 3;

    }

    .title1 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: blue;
        height: 50px;

        /*flex:1;*/
    }

    .title11 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: blue;
        width: 50px;
        /*flex:2;*/
    }

    .title111 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: blue;
        width: 50px;
        /*flex:2;*/
    }

    .title2 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: green;
        height: 60px;
        /*flex:2;*/
    }

    .title22 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: green;
        width: 60px;
        /*flex:3;*/
    }

    .title222 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: green;
        width: 60px;
        /*flex:3;*/
    }

    .title3 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: red;
        height: 70px;
        /*flex:3;*/
    }

    .title33 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: red;
        width: 70px;
        /*flex:1;*/
    }

    .title333 {
        color: #FFFFFF;
        font-size: 36px;
        background-color: red;
        width: 70px;
        /*flex:1;*/
    }
</style>

<script>
    export default {
        data() {
            return {
                imageList: [
                    {title: 'AAAA', src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
                    {
                        title: 'BBBB',
                        src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'
                    },
                    {
                        title: 'CCCC',
                        src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'
                    }
                ]
            }
        },
        methods: {
            onchange(event) {
                console.log('changed:', event.index)
            }
        }
    }
</script>