微信小程序把玩(八)view组件
来源:互联网 发布:你看的我是蓝色的 知乎 编辑:程序博客网 时间:2024/05/16 18:29
刚看到这个效果的时候还真是和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;}
3 0
- 微信小程序把玩(八)view组件
- 微信小程序把玩(八)view组件
- 微信小程序把玩(九)scroll-view组件
- 微信小程序把玩(十)swiper组件
- 微信小程序把玩(十一)icon组件
- 微信小程序把玩(十二)text组件
- 微信小程序把玩(十三)progress组件
- 微信小程序把玩(十四)button组件
- 微信小程序把玩(十五)checkbox组件
- 微信小程序把玩(十六)form组件
- 微信小程序把玩(十七)input组件
- 微信小程序把玩(十八)picker组件
- 微信小程序把玩(十九)radio组件
- 微信小程序把玩(二十)slider组件
- 微信小程序把玩(二十一)switch组件
- 微信小程序把玩(二十二)action-sheet组件
- 微信小程序把玩(二十三)modal组件
- 微信小程序把玩(二十四)toast组件
- java常量池概念
- 雅思
- 安装birl_baxter过程记录
- 树——求先序排列
- 【时光回溯】【JZOJ3567】【GDKOI2014】石油储备计划
- 微信小程序把玩(八)view组件
- poj1015 Jury Compromise
- 关于类成员函数中访问同类对象的私有成员
- 第四周求圆柱体的表面积
- 第五周 项目2-建立链栈算法库
- spring、hibernate、struts整合
- Java设计模式--单例模式
- 云上云下容灾—微软Azure Site Recovery
- 机器学习-第一讲机器学习的动机与应用