<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{
width: 60px;
height: 60px;
}
.green{
"> #00ff00;
}
.red{
"> #ff0000;
}
.blue{
"> #0000ff;
}
 
 
 

小程序view排版的更多相关文章

  1. 微信小程序 View：flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. 微信小程序view不能换行 text实现转义换行符

    在html中可以直接使用<br />换行,但是小程序wxml中使用<br />无效,可以换成\n Page({ data: { title: '至少5个字\n请多说些感受吧' ...

  3. 第十篇、微信小程序-view组件

    视图容器 常用的样式的属性: 详情:http://www.jianshu.com/p/f82262002f8a display :显示的模式.可选项有:flex(代表view可以伸缩,弹性布局)- f ...

  4. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

  5. 小程序View内的文字不换行

    今天发现View内的文字一行过去直接被屏幕右边吃掉,没有预期的换行,设置width也不管用,最后用它解决了 1. white-space:pre-line(不会保留空白和tabs) 2. white- ...

  6. 微信小程序-view组件

    <view class="section"> <view class="section__title">flex-direction: ...

  7. 微信小程序 view 布局

    刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性”row” ...

  8. 微信小程序 view中的image水平垂直居中

    当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 .card ...

  9. 小程序view的显示与隐藏

    需要在全局数据块中,设定一个控制键. data: { ......//省略其他代码 showView: true }, 然后是在wxml中,view的class中设置2个class,并用三目表达式来进 ...

随机推荐

  1. Day5--Python--字典

    字典1.什么是字典 dict. 以{}表示,每一项用逗号隔开,内部元素用key:value的形式来保存数据 {'jj':'林俊杰','jay':'周杰伦'} 查询效率非常高,通过key来查找元素 内部 ...

  2. 函数式编程 lodash 常用api

    1.forEach _.forEach({ 'a': 1, 'b': 2 }, function(value, key) { console.log(key); }); _.forEach([3,4] ...

  3. mac host文件配置

    Shift+Command+G 三个组合按键,并输入 Hosts 文件的所在路径:/etc/hosts /private/etc/hosts

  4. 某些浏览器具有dns缓存功能，大家更改域名指向，建议清理下浏览器缓存

    最近遇到一个很郁闷的问题,在我们的的ngnix服务器上原来默认的网址需要更改.更改后,重启了ngnix.可是在客户端使用360浏览器打开网址.地址还是指向旧地址.直接输入服务器 IP地址转向了新地址, ...

  5. Salt初识和安装

    Salt Salt是一个配置管理系统,能够根据定义的状态,配置远程节点,比如保证远程节点上指定的安装包安装,运行指定的服务.Salt也是一个分布式远程执行系统,用于在远程节点上执行命令和请求数据,不论 ...

  6. C#梳理【集合Collection】

    C# 集合(Collection) 集合(Collection)类是专门用于数据存储和检索的类.这些类提供了对栈(stack).队列(queue).列表(list)和哈希表(hash table)的支 ...

  7. Hibernate的入门(概念1):

    什么是持久化类? 持久化类的编写规则? 区分自然主键和代理主键? 主键生成策略?

  8. java中将string类型转int类型或者将string类型转long类型方法

    将字串 String 转换成整数 int 两种方法: 1).int i = Integer.parseInt("111"); 或 i = Integer.parseInt([Str ...

  9. Centos 7最小化安装部署PostgreSQL

    安装 sh-4.2# yum install https://download.postgresql.org/pub/repos/yum/11/redhat/rhel-7-x86_64/pgdg-ce ...

  10. Oracle DataBase 编码格式

    sqlplus 查询 Oracle 数据库结果乱码或显示 ? 则需要设置字符集 一.客户端字符集 格式:NLS_LANG=language_territory.charset Language: 指定 ...