view

视图容器。

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">flex-direction: row</view>
  4.   <view class="flex-wrp_one">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_one{
  3.   display: flex;
  4.   flex-direction: row;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">flex-direction: column</view>
  4.   <view class="flex-wrp_two">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_two{
  3.   display: flex;
  4.   flex-direction: column;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: flex-start</view>
  4.   <view class="flex-wrp_three">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_three{
  3.   display: flex;
  4.   justify-content: flex-start;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: flex-end</view>
  4.   <view class="flex-wrp_four">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_four{
  3.   display: flex;
  4.   justify-content: flex-end;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: center</view>
  4.   <view class="flex-wrp_five">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_five{
  3.   display: flex;
  4.   justify-content: center;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: space-between</view>
  4.   <view class="flex-wrp_six">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_six{
  3.   display: flex;
  4.   justify-content: space-between;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: space-around</view>
  4.   <view class="flex-wrp_seven">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_seven{
  3.   display: flex;
  4.   justify-content: space-around;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">justify-content: space-evenly</view>
  4.   <view class="flex-wrp_eight">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  1. // wxss
  2. .flex-wrp_eight{
  3.   display: flex;
  4.   justify-content: space-evenly;
  5. }
  6. .flex-item{
  7.   width: 100px;
  8.   height: 100px;
  9. }
  11. .bc_green{
  12.   background: green;
  13. }
  15. .bc_red{
  16.   background: red;
  17. }
  19. .bc_blue{
  20.   background: blue;
  21. }

属性

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

源码

  1. // wxml
  2. <view class="section">
  3.   <view class="section__title">flex-direction: row</view>
  4.   <view class="flex-wrp_one">
  5.     <view class="flex-item bc_green">1</view>
  6.     <view class="flex-item bc_red">2</view>
  7.     <view class="flex-item bc_blue">3</view>
  8.   </view>
  9. </view>
  11. <view class="section">
  12.   <view class="section__title">flex-direction: column</view>
  13.   <view class="flex-wrp_two">
  14.     <view class="flex-item bc_green">1</view>
  15.     <view class="flex-item bc_red">2</view>
  16.     <view class="flex-item bc_blue">3</view>
  17.   </view>
  18. </view>
  20. <view class="section">
  21.   <view class="section__title">justify-content: flex-start</view>
  22.   <view class="flex-wrp_three">
  23.     <view class="flex-item bc_green">1</view>
  24.     <view class="flex-item bc_red">2</view>
  25.     <view class="flex-item bc_blue">3</view>
  26.   </view>
  27. </view>
  29. <view class="section">
  30.   <view class="section__title">justify-content: flex-end</view>
  31.   <view class="flex-wrp_four">
  32.     <view class="flex-item bc_green">1</view>
  33.     <view class="flex-item bc_red">2</view>
  34.     <view class="flex-item bc_blue">3</view>
  35.   </view>
  36. </view>
  38. <view class="section">
  39.   <view class="section__title">justify-content: center</view>
  40.   <view class="flex-wrp_five">
  41.     <view class="flex-item bc_green">1</view>
  42.     <view class="flex-item bc_red">2</view>
  43.     <view class="flex-item bc_blue">3</view>
  44.   </view>
  45. </view>
  47. <view class="section">
  48.   <view class="section__title">justify-content: space-between</view>
  49.   <view class="flex-wrp_six">
  50.     <view class="flex-item bc_green">1</view>
  51.     <view class="flex-item bc_red">2</view>
  52.     <view class="flex-item bc_blue">3</view>
  53.   </view>
  54. </view>
  56. <view class="section">
  57.   <view class="section__title">justify-content: space-around</view>
  58.   <view class="flex-wrp_seven">
  59.     <view class="flex-item bc_green">1</view>
  60.     <view class="flex-item bc_red">2</view>
  61.     <view class="flex-item bc_blue">3</view>
  62.   </view>
  63. </view>
  65. <view class="section">
  66.   <view class="section__title">justify-content: space-evenly</view>
  67.   <view class="flex-wrp_eight">
  68.     <view class="flex-item bc_green">1</view>
  69.     <view class="flex-item bc_red">2</view>
  70.     <view class="flex-item bc_blue">3</view>
  71.   </view>
  72. </view>
  1. // wxss
  2. .flex-wrp_one{
  3.   display: flex;
  4.   flex-direction: row;
  5. }
  7. .flex-wrp_two{
  8.   display: flex;
  9.   flex-direction: column;
  10. }
  12. .flex-wrp_three{
  13.   display: flex;
  14.   justify-content: flex-start;
  15. }
  17. .flex-wrp_four{
  18.   display: flex;
  19.   justify-content: flex-end;
  20. }
  22. .flex-wrp_five{
  23.   display: flex;
  24.   justify-content: center;
  25. }
  27. .flex-wrp_six{
  28.   display: flex;
  29.   justify-content: space-between;
  30. }
  32. .flex-wrp_seven{
  33.   display: flex;
  34.   justify-content: space-around;
  35. }
  37. .flex-wrp_eight{
  38.   display: flex;
  39.   justify-content: space-evenly;
  40. }
  42. .flex-item{
  43.   width: 100px;
  44.   height: 100px;
  45. }
  47. .bc_green{
  48.   background: green;
  49. }
  51. .bc_red{
  52.   background: red;
  53. }
  55. .bc_blue{
  56.   background: blue;
  57. }

开源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. 关于数据库管理系统DBMS--关系型数据库（MySQL/MariaDB）

    数据库的结构(3种):层次,网状,关系型(用的最多): DBMS的三层模型: 视图层:面向最终用户: 逻辑层:面向程序员或DBA: 物理层:面向系统管理员: 关系型数据库管理系统——RDBMS: 主要 ...

  2. Ntaub表单开发入门系列 (一)

    此系列文章通过虚构场景介绍Ntaub表格开发流程.示例假设某公司人力部门要制定招聘计划,要求各部门按月提交招聘需求,招聘需求需经人力总监和公司总经理审批. 软件可以从http://www.ntaub. ...

  3. bat脚本+diskpart 脚本实现自动划分磁盘分区

    我提供的脚本只是案例展示,真实场景需要自行修改.(正好我今天看到一个规范的bat脚本,我放出来,大家一起学习下) 要求:将20G的磁盘1,分出4G为主分区,4G扩展分区(2个2G逻辑分区) 试验环境: ...

  4. widows10 安装1803 版本后不能访问网络上的机器解决方法

    安装Windows10 1803 版本后,发现网络上的机器好多不见了. 使用 ping  可以ping 通,但是访问网络共享提示下面错误. 这个原因是1803 中没有安装 SMB1.0 协议.因为 S ...

  5. Windows -- cmd命令: ipconfig 和 nbtstat

    1. ipconfig 命令格式及参数如下: 2. nbtstat 命令格式及参数如下:

  6. odoo权限机制

    转两篇关于权限的2篇文章,加深这方面的认识.注:后面附有原作者地址,希望不构成侵权. 第一篇:http://www.cnblogs.com/dancesir/p/6994030.html Odoo的权 ...

  7. 阿里巴巴excel工具easyexcel 助你快速简单避免OOM

    Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题,但POI还是有 ...

  8. js设置回车键触发事件

    设置按回车键时触发查询事件: document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.key ...

  9. Javascript高级编程学习笔记（97）—— WebGL(3) WebGL上下文(1)

    WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...

  10. 新DevOps八荣八耻

    昀哥 20181001以随时可扩容可缩容可重启可切换机房流量为荣,以不能迁移为耻. 以可配置为荣,以硬编码为耻. 以系统互备为荣,以系统单点为耻. 以交付时有监控报警为荣,以交付裸奔系统为耻. 以无状 ...