view

视图容器。

// wxml

<view class="section">

  <view class="section__title">flex-direction: row</view>

  <view class="flex-wrp_one">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_one{

  display: flex;

  flex-direction: row;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">flex-direction: column</view>

  <view class="flex-wrp_two">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_two{

  display: flex;

  flex-direction: column;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: flex-start</view>

  <view class="flex-wrp_three">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_three{

  display: flex;

  justify-content: flex-start;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: flex-end</view>

  <view class="flex-wrp_four">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_four{

  display: flex;

  justify-content: flex-end;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: center</view>

  <view class="flex-wrp_five">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_five{

  display: flex;

  justify-content: center;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: space-between</view>

  <view class="flex-wrp_six">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_six{

  display: flex;

  justify-content: space-between;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: space-around</view>

  <view class="flex-wrp_seven">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_seven{

  display: flex;

  justify-content: space-around;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}



// wxml

<view class="section">

  <view class="section__title">justify-content: space-evenly</view>

  <view class="flex-wrp_eight">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_eight{

  display: flex;

  justify-content: space-evenly;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}

属性

排列方式(flex-direction) 描述
row 横向排列
column 纵向排列
项目内容对齐（justify-content） 描述
flex-start 向行头紧挨
flex-end 向行尾紧挨
center 居中紧挨
space-between 平均分布
space-around 平均分布 ,两边留有一半间隔
space-evenly 两边间隔与中间相同

源码

// wxml

<view class="section">

  <view class="section__title">flex-direction: row</view>

  <view class="flex-wrp_one">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">flex-direction: column</view>

  <view class="flex-wrp_two">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: flex-start</view>

  <view class="flex-wrp_three">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: flex-end</view>

  <view class="flex-wrp_four">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: center</view>

  <view class="flex-wrp_five">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: space-between</view>

  <view class="flex-wrp_six">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: space-around</view>

  <view class="flex-wrp_seven">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>

<view class="section">

  <view class="section__title">justify-content: space-evenly</view>

  <view class="flex-wrp_eight">

    <view class="flex-item bc_green">1</view>

    <view class="flex-item bc_red">2</view>

    <view class="flex-item bc_blue">3</view>

  </view>

</view>


// wxss

.flex-wrp_one{

  display: flex;

  flex-direction: row;

}

.flex-wrp_two{

  display: flex;

  flex-direction: column;

}

.flex-wrp_three{

  display: flex;

  justify-content: flex-start;

}

.flex-wrp_four{

  display: flex;

  justify-content: flex-end;

}

.flex-wrp_five{

  display: flex;

  justify-content: center;

}

.flex-wrp_six{

  display: flex;

  justify-content: space-between;

}

.flex-wrp_seven{

  display: flex;

  justify-content: space-around;

}

.flex-wrp_eight{

  display: flex;

  justify-content: space-evenly;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.bc_green{

  background: green;

}

.bc_red{

  background: red;

}

.bc_blue{

  background: blue;

}

开源github分享

Wechat_small_program_Share

微信小程序分享

小程序开发基础-view视图容器的更多相关文章

  1. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

  2. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  3. 小程序开发基础-scroll-view 可滚动视图区域

    小编 / 达叔小生 小程序开发基础-scroll-view 可滚动视图区域 这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可. scro ...

  4. 微信小程序开发基础

    前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...

  5. 小程序开发-基础组件icon/text/progress入门

    小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx: ...

  6. 微信小程序开发基础知识总结

    微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很 ...

  7. 微信小程序开发——后端Java（一）

    一.前言 最近接触了小程序的开发,后端选择Java,因为小程序的代码运行在腾讯的服务器上,而我们自己编写的Java代码运行在我们自己部署的服务器上,所以一开始不是很明白小程序如何与后台进行通信的,然后 ...

  8. 微信小程序开发 -- 01

    微信小程序开发基础 -- 开发前的准备 缘由 1月9日张小龙微信小程序正式上线,因为微信,所以小程序从诞生开始就头戴巨大的光环,很多的团队,公司以及开发的个体都眼巴巴的盯着这个小程序.而那个时候我却在 ...

  9. 零基础入门微信小程序开发

    注:本文来源于:<零基础入门微信小程序开发> 课程介绍 本达人课是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件.页面样式文件.Ja ...

随机推荐

  1. 深度召回模型在QQ看点推荐中的应用实践

    本文由云+社区发表 作者:腾讯技术工程 导语:最近几年来,深度学习在推荐系统领域中取得了不少成果,相比传统的推荐方法,深度学习有着自己独到的优势.我们团队在QQ看点的图文推荐中也尝试了一些深度学习方法 ...

  2. .Net 事件总线之Autofac解耦

    事件总线是通过一个中间服务,剥离了常规事件的发布与订阅(消费)强依赖关系的一种技术实现.事件总线的基础知识可参考圣杰的博客[事件总线知多少] 本片博客不再详细概述事件总线基础知识,核心点放置使用Aut ...

  3. js初级入门

    javascript的数据类型 (symbol)一.原始数据类型 或 基本数据类型 6种 1,undefined (1,申明未赋值,2,函数没有返回值)2,null (空,不存在)3,number ( ...

  4. 在github上fork项目如何同步并解决冲突

    在github上fork项目如何同步并解决冲突 在github上有些项目我们可能会进行一些自己功能的添加但是提交PR后作者基于设计或者其他原因考虑没有通过,但是这个功能又是我们必须的.这时我们就想自己 ...

  5. MongoDB通过Shell 实现集合的日常归档

    1.MongoDB数据归档的意义 和其他类型的数据库一样,归档对MongoDB同样重要.通过归档,可以保持集合中合适的数据量,对数据库的性能是一种保障,也就是大家常说的数据冷热分离. 同时,归档对数据 ...

  6. (一)初识Redis

    1.redis简介 Redis是一个速度非常快的key-value非关系型存储数据库,可以存储5种形态的键值对,可以将存储在内存中的键值对持久化到硬盘,可以使用复制特性扩展读性能,还可以使用客户端分片 ...

  7. SQL Server移除事务日志后sys.master_files依然存在记录问题

    在SQL Server中移除了事务日志文件后,使用sys.master_files检查时发现,对应的事务日志文件记录信息依然存在sys.master_files里面,只是状态state_desc为OF ...

  8. mybatis的时间比较 xml 及不解析<=的写法

    <if test="type ==1"> and DATE_FORMAT(create_date,'%Y-%m-%d') = DATE_FORMAT(now(),'%Y ...

  9. 设置Mac 终端走代理

    1.打开终端执行:export http_proxy=socks5://127.0.0.1:1080 这个只能在当前终端执行一次退出后就需要重新设置 如果需要开机自动设置,把上面的代码加到~/.bas ...

  10. Windows Server 2016-批量新建域用户(二)

    前几个章节我们讲到Windows Server 2016-图形化新建域用户(一),本章节我们简单讲解下如何通过命令批量创建域用户,以便高效完成日常工作中实际批量创建用户需求,内容涉及dsadd use ...