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. SpringBoot启动原理分析

    用了差不多两年的SpringBoot了,可以说对SpringBoot已经很熟了,但是仔细一想SpringBoot的启动流程,还是让自己有点懵逼,不得不说是自己工作和学习的失误,所以以此文对Spring ...

  2. 免费开源ERP-成功案例分析（1）

    Odoo用户案例 Odoo用户概要 关于Odoo全球的用户,我们来看一些数据: Odoo目前全球有300万使用者 Odoo系统上每天新创建的数据库超过1000个 Odoo和Word.Excel.Pow ...

  3. Button控件的点击事件

    Java的代码 主要重点: findViewById(); OnClickListener() package com.example.admin.myapplication; import andr ...

  4. grep 及正则表达式

    grpe 及正则表达式 文本查找的需要:grep,egrep,fgrepgrep: 根据模式,搜索文本,并将符合模式的文本行显示出来.Pattern : 文本字符以及正则表达式的元字符组合而成的匹配条 ...

  5. C++基础——类封装简单示例

    一.前言 在IC前端设计/验证领域,只会HDL远远不够.目前大多数项目使用已开发好的系统架构和IP Core,因此设计部分的工作量慢慢向系统集成和验证方向转移.而在集成和验证过程中,往往以各种脚本和面 ...

  6. VS2017搭建驱动开发环境WDK

    先安装VS2017,然后在安装WDK,WDK会自动关联到VS2017中,不用你任何操作,自动在新建项目中可以找到驱动开发. 如果以上安装完成后,在VS2017中新建项目中没有发现WDK,那么需要进行修 ...

  7. 以Windows服务方式运行.NET Core程序

    在之前一篇博客<以Windows服务方式运行ASP.NET Core程序>中我讲述了如何把ASP.NET Core程序作为Windows服务运行的方法,而今,我们又遇到了新的问题,那就是: ...

  8. Activity 关于生命周期一些问题的实践验证

    Activity 关于生命周期一些问题的实践验证 本文内容 1. 如何验证问题 2. 正常情况下的生命周期 3. 由活动 A 启动活动 B 时,活动 A 的 onpause() 和 B 的 onRes ...

  9. Sublime Text2支持Vue语法高亮显示

    1.下载vue语法高亮插件vue-syntax-highlight 下载地址:https://github.com/vuejs/vue-syntax-highlight 2.将vue-syntax-h ...

  10. C# 《编写高质量代码改善建议》整理&笔记 --(五)类型设计

    1.区分接口和抽象类的应用场合 区别: ①接口支持多继承,抽象类则不能. ②接口可以包含方法,属性,索引器,事件的签名,但不能有实现,抽象类则可以. ③接口在增加新方法后,所有的继承者都必须重构,否则 ...