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. Spring学习(一)：理解IoC容器

    序言 记得刚毕业那会儿,出来招工作被问到Spring的核心时,都觉得简单的一笔,直接说不就是IoC(控制反转)和DI(依赖注入)么,然后省略一万字对两个名词的解释.最近空来整理了一下Spring中Io ...

  2. 关于ORACLE的SQL语句拼接、替换、截取、排序，联表等...~持续汇总~

     先看一下所有的数据.这里全部为VARCHAR2(255). 字段拼接 在所有的性别后面加% 字段替换,把性别TPF_SEX去除百分号% 字段截取 字段截取+拼接 字段替换,这里把百分号%替换为空,也 ...

  3. 在keil中添加stc系列单片机型号(模型)方法

    1.下载安装stc-isp烧录软件: 官网:http://www.gxwmcu.com/ 2.打开使用stc-isp软件,并导入stc官方器件库: 注意:一定要找到包含有C51和UV4的文件夹 3.显 ...

  4. WPF软件开发系统之三——自助购票取票、自助选座系统

    本系统使用.Net WPF开发,运行于Windows操作系统,电脑或者触摸屏设备(包括竖屏). 本系统开发背景:景点.影院.或商场的自助购票.取票系统. 图书馆.自习室的选座.占座系统. 功能包括:选 ...

  5. CTF比赛 十一月场 Look 复现

    拿到题吧,一般的我的操作就是,先看看审核元素有有没有什么东西,然后去御剑扫描,git泄露,备份文件泄露,不行就再去burp抓包看看头部,换方法(post换成get) 发现不明的头部,这种头部的话可能是 ...

  6. Java核心技术第五章——1.类、超类、子类（2）

    继上一篇Java核心技术第五章——1.类.超类.子类(1) 6.重载解析 假如调用ClassName.Method(args) 1.编译器列出类ClassName所有名为Method的方法. 2.编译 ...

  7. java集合常见面试题

    1. Array和ArrayList的区别,什么时候更合适用Array a)      Array是数组,可以容纳基本类型和对象,而ArrayList是集合,只能容纳对象 b)      Array是 ...

  8. Python基础（zip方法）

    zip函数: 描述:将zip函数中的两个可迭代对象参数按对应索引值进行匹配组合,得到zip对象.(拉链式函数) zip函数简单应用如下: #-----------------zip函数-------- ...

  9. TabTopLayout【自定义顶部选项卡区域（固定宽度且居中）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  10. 『集群』003 Slithice 最简分布式(多个客户端，一个独立服务端)

    Slithice 最简分布式(多个客户端,一个独立服务端) 案例Demo 展示: 我们搭建一个 可以 独立运行 的 服务端:然后 多个客户端 并发链接 这个 服务端 完成 分布式逻辑: 服务器 独立运 ...