微信小程序把玩（八）view组件
刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样.
view这个组件就是一个视图组件使用起来非常简单。
主要属性：
flex-direction： 主要两个特性”row”横向排列”column”纵向排列
justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）
- 可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）
- 可选属性 (‘flex-start’, ‘flex-end’, ‘center’）
wxml
<view class="page">
<view class="page__hd">
<text class="page__title">view</text>
<text class="page__desc">弹性框模型分为弹性容器以及弹性项目。当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
</view>
<view class="page__bd">
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-start</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-start;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: flex-end</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: flex-end;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: center</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: center;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-between</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">justify-content: space-around</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: flex-end</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-end">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: center</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: center">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
<view class="section">
<view class="section__title">align-items: center</view>
<view class="flex-wrp" style="height: 200px;flex-direction:row;justify-content: center;align-items: flex-start">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
</view>
</view>
</view>wxss
.flex-wrp{
height: 100px;
display:flex;
background-color: #FFFFFF;
}
.flex-item{
width: 100px;
height: 100px;
}微信小程序把玩（八）view组件的更多相关文章
- 微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩（十八）picker组件
原文:微信小程序把玩(十八)picker组件 picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知道是BUG还是啥!没 ...
- 微信小程序把玩（二十一）switch组件
原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</vi ...
- 微信小程序把玩（十七）input组件
原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...
- 微信小程序把玩（十二）text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 微信小程序把玩（九）scroll-view组件
原文:微信小程序把玩(九)scroll-view组件 scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用 ...
- 微信小程序把玩（十）swiper组件
原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...
- 微信小程序把玩（二十九）video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- 微信小程序把玩（二十七）audio组件
原文:微信小程序把玩(二十七)audio组件 音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{ ...
随机推荐
- 一入Python深似海--print
先给大家来个干货^~^,学习Python的一个好站点,http://learnpythonthehardway.org/book/ 经典样例 以下是几个老经典的样例喽,刚接触Python的能够敲一敲, ...
- sklearn 特征降维利器 —— PCA & TSNE
同为降维工具,二者的主要区别在于, 所在的包不同(也即机制和原理不同) from sklearn.decomposition import PCA from sklearn.manifold impo ...
- CreateFileMapping和MapViewOfFile函数
大家都是到PG是分布式网络事务处理数据库,与其他数据库优点之一就在于服务器与客户的交流是一对一的,所谓一对一是指,针对客户的每一连接服务器都会产生一个进程为其服务,那么问题就来了,这些进程间是如何交互 ...
- cocos2d-x 3.0学习游戏笔记的例子《卡塔防》第五步---开始建立游戏界面
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写.第一别全然照搬代码.第二能够说 ...
- maven 依赖(依赖范围,聚合,继承等)
目录: 1.什么是依赖? 2.依赖的管理:依赖的范围与传递,依赖的排除,依赖的原则(maven对依赖冲突的处理原则) 3.依赖的版本管理 4.继承与聚合 1.什么是依赖? 简单的讲,当jar包A需要j ...
- 《⑨也懂系列：MinGW-w64安装教程》著名C/C++编译器GCC的Windows版本（MinGW-w64在安装的时候可以选择版本，有图，一步一步）
发布日期 2016年10月31日 分类 教程 标签 编程.软件 前言<⑨也懂系列:MinGW-w64安装教程>这篇文章由 rsreland (http://rsreland.net)于 2 ...
- Cython 的学习
开发效率极高的 Python 一直因执行效率过低为人所诟病,Cython 由此诞生,特性介于 Python 和 C 语言之间. Cython 学习 1. Cython 是什么? 它是一个用来快速生成 ...
- sklearn 下距离的度量 —— sklearn.metrics
1. pairwise from sklearm.metrics.pairwise import pairwise_distance 计算一个样本集内部样本之间的距离: D = np.array([n ...
- 思想者：漫谈大学生的四个LEARN
核心提示:哪四个Learn呢?Learn to learn(学习怎样学习),Learn to be(学习怎样做人),Learn to do(学习怎样做事),Learn totogether(学习 ...
- ios技术支持网址
如有任何问题可以留言: 邮箱地址:cccliche@outlook.com