zoukankan      html  css  js  c++  java
  • 小程序布局

    <view class="bc">
    <view>
    <text bc_text>demo</text>
    </view>
    <view class="bc_2">
    <view>行排列</view>
    <view style="display:flex; flex-direction:row;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>列排列</view>
    <view style="display:flex; flex-direction:column;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>向左靠拢</view>
    <view style="display:flex; flex-direction:row;justify-content:flex-start;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>向右靠拢</view>
    <view style="display:flex; flex-direction:row;justify-content:flex-end;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>左右居中</view>
    <view style="display:flex; flex-direction:row;justify-content:center;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>向左右靠拢,中间均匀分布</view>
    <view style="display:flex; flex-direction:row;justify-content:space-between;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>左右留空,中间均匀分布</view>
    <view style="display:flex; flex-direction:row;justify-content:space-around;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>向上靠拢</view>
    <view style="display:flex; flex-direction:row;align-items:flex-start; height:100px;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>向下靠拢</view>
    <view style="display:flex; flex-direction:row;align-items:flex-end; height:100px;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    <view class="bc_2">
    <view>上下居中</view>
    <view style="display:flex; flex-direction:row;align-items:center; height:100px;">
    <view class='flex_item green'></view>
    <view class='flex_item red'></view>
    <view class='flex_item blue'></view>
    </view>
    </view>
    </view>
     
     
    .bc{
    "> #ffff00;
    font-size: 16px;
    }
    .bc_2{
    "> #ffffff;
    margin: 10px;
    }
    .bc_text{
    padding:40px;
    }
    .flex_item{
    60px;
    height: 60px;
    }
    .green{
    "> #00ff00;
    }
    .red{
    "> #ff0000;
    }
    .blue{
    "> #0000ff;
    }
     
     
     

  • 相关阅读:
    BZOJ1040: [ZJOI2008]骑士
    Codeforces 849D.Rooter's Song
    POJ4852 Ants
    NOIP模拟赛 17.10.10
    Codeforces 851D Arpa and a list of numbers
    BZOJ2529: [Poi2011]Sticks
    BZOJ1826: [JSOI2010]缓存交换
    POJ3579 Median
    codevs1214 线段覆盖
    POJ2230 Watchcow
  • 原文地址:https://www.cnblogs.com/zimublog/p/9506875.html
Copyright © 2011-2022 走看看