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;
    }
     
     
     

  • 相关阅读:
    理解inode
    贝叶斯公式与拼写检查器
    《C程序设计语言》第四章 函数和程序结构
    MIT《计算机科学与编程导论》课堂笔记
    很牛的牛顿迭代法
    开发一个小工具重温C#经典问题
    斯坦福《编程方法学》环境搭建及常见问题
    看Sybase官方手册学索引工作原理
    学习编程的方法、软件和工具
    大师里奇留给了我们什么
  • 原文地址:https://www.cnblogs.com/zimublog/p/9506875.html
Copyright © 2011-2022 走看看