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. 锁开销优化以及 CAS 简单说明

    锁开销优化以及 CAS 简单说明 锁 互斥锁是用来保护一个临界区,即保护一个访问共用资源的程序片段,而这些共用资源又无法同时被多个线程访问的特性.当有线程进入临界区段时,其他线程或是进程必须等待. 在 ...

  2. DevOps实践之一:基于Docker构建企业Jenkins CI平台

    基于Docker构建企业Jenkins CI平台 一．什么是CI 持续集成(Continuous integration)是一种软件开发实践,每次集成都通过自动化的构建(包括编译,发布,自动化测试)来 ...

  3. MobileForm控件的使用方式-用.NET（C#）开发APP的学习日志

    今天继续Smobiler开发APP的学习日志,这次是做一个title.toolbar.侧边栏三种效果 样式一 一.          Toolbar 1.       目标样式 我们要实现上图中的效果 ...

  4. java之servlet入门操作教程一续

    本节主要是在java之servlet入门操作教程一  的基础上使用myeclipse实现自动部署的功能 准备: java之servlet入门操作教程一 中完成myFirstServlet项目的创建: ...

  5. 浅谈java线程池实现

    再进入主题之前,我们先了解几个概念,对读源码有所帮助,对于线程池的运行状态,有4个级别,分别是RUNNING,SHUTING,STOP,TIDING,TERMINATED 解释如下: The runS ...

  6. windows update error 0x8024401c

    Error 0x8024401c 以管理员身份运行-命令提示符 执行以下3条命令 net stop wuauserv reg delete HKEY_LOCAL_MACHINE\SOFTWARE\Po ...

  7. Git报错 bad numeric config value '100000' for 'pack.windowmemory': out of range

    Git报错 bad numeric config value '10240M' for 'pack.windowmemory': out of range $ git config --edit -- ...

  8. ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State

    开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...

  9. 开发人员的必备工具Git（初级）

    Git是什么 Git是目前世界上最先进的分布式版本控制系统. 这个软件用起来就应该像这个样子,能记录每次文件的改动: 举个栗子 :       版本 用户 说明 日期 1 张三 删除了软件服务条款5 ...

  10. HTML之常用标签及属性

    标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...