欢迎光临，了解微信小程序开发，就上易用通！

小程序开发

首页

开发文档

教程 文档 BUG 入门

运营教程

业界 测评 经验 问答

小程序模板

餐饮 互联网 教育培训 旅游 汽车 生活服务 医疗保健 艺术生活 招聘 娱乐 活动 装修 食品 科技 游戏 其他

小程序应用

模板 文档 应用

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《一》view视图容器

发布：2018-01-25 16:44浏览： 次来源：网络 作者：tianshu

组件说明:

• 视图容器
• 没有固定结构，比较随意，可以包裹其他组件，也可以放到一些组件的内部，类似HTML中的 DIV

组件用法：

 

wxml

 

1. <view  class="btnGroup">
2.         <view class="item orange" >退格</view>
3.         <view class="item orange" >清屏</view>
4.         <view class="item orange" >+/-</view>
5.         <view class="item orange" >+</view>
6.       </view>
7.       <view  class="btnGroup">
8.         <view class="item blue" >9</view>
9.         <view class="item blue" >8</view>
10.         <view class="item blue" >7</view>
11.         <view class="item orange" >-</view>
12.       </view>
13.       <view  class="btnGroup">
14.         <view class="item blue" >6</view>
15.         <view class="item blue" >5</view>
16.         <view class="item blue" >4</view>
17.         <view class="item orange" >×</view>
18.       </view>
19.       <view  class="btnGroup">
20.         <view class="item blue" >3</view>
21.         <view class="item blue" >2</view>
22.         <view class="item blue" >1</view>
23.         <view class="item orange" >÷</view>
24.       </view>
25.       <view  class="btnGroup">
26.         <view class="item blue" >0</view>
27.         <view class="item blue" >.</view>
28.         <view class="item blue" >历史</view>
29.         <view class="item orange" >=</view>
30.       </view>

 

css

 

1. .btnGroup{
2.     display:flex;
3.     flex-direction:row;
4. }
5. .orange{
6.     color: #fef4e9;
7.     border: solid 1px #da7c0c;
8.     background: #f78d1d;
9. }
10. .blue{
11.     color: #d9eef7;
12.     border: solid 1px #0076a3;
13.     background: #0095cd;
14. }

 

flex-direction: row：

 

 

wxml

 

1. <view class="flex-wrp">
2.     <view class="flex-item red" ></view>
3.     <view class="flex-item green" ></view>
4.     <view class="flex-item blue" ></view>
5. </view>

 

wxss

 

1. .flex-wrp{
2.     height: 100px;
3.     display:flex;
4.     background-color: #FFFFFF;
5. }
6. .flex-item{
7.     width: 100px;
8.     height: 100px;
9. }
10. .red{
11.     background: red;
12. }
13. .green{
14.     background: green;
15. }
16. .blue{
17.     background: blue;
18. }

 

flex-direction: column：

 

 

wxml

 

1. <view class="flex-wrp column">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .column{
2.    flex-direction:column;
3. }
4. .flex-item{
5.     width: 100px;
6.     height: 100px;
7. }
8. .flex-wrp{
9.     height: 100px;
10.     display:flex;
11.     background-color: #FFFFFF;
12. }
13. .red{
14.     background: red;
15. }
16. .green{
17.     background: green;
18. }
19. .blue{
20.     background: blue;
21. }

 

justify-content: flex-start：

 

wxml

 

1. <view class="flex-wrp flex-start">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .flex-start{
2.     flex-direction:row;
3.     justify-content: flex-start;
4. }
5. .flex-wrp{
6.     height: 100px;
7.     display:flex;
8.     background-color: #FFFFFF;
9. }
10. .flex-item{
11.     width: 100px;
12.     height: 100px;
13. }
14. .red{
15.     background: red;
16. }
17. .green{
18.     background: green;
19. }
20. .blue{
21.     background: blue;
22. }

justify-content: flex-end

 

 

 

wxml

 

1. <view class="flex-wrp flex-end">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .flex-end{
2.     flex-direction:row;
3.     justify-content: flex-end;
4. }
5. .flex-wrp{
6.     height: 100px;
7.     display:flex;
8.     background-color: #FFFFFF;
9. }
10. .flex-item{
11.     width: 100px;
12.     height: 100px;
13. }
14. .red{
15.     background: red;
16. }
17. .green{
18.     background: green;
19. }
20. .blue{
21.     background: blue;
22. }

 

justify-content: center

 

 

wxml

 

1. <view class="flex-wrp justify-content-center">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .justify-content-center{
2.     flex-direction:row;
3.     justify-content: center;
4. }
5. .flex-wrp{
6.     height: 100px;
7.     display:flex;
8.     background-color: #FFFFFF;
9. }
10. .flex-item{
11.     width: 100px;
12.     height: 100px;
13. }
14. .red{
15.     background: red;
16. }
17. .green{
18.     background: green;
19. }
20. .blue{
21.     background: blue;
22. }

 

justify-content: space-between

 

 

wxml

 

1. <view class="flex-wrp space-between">
2.   <view class="flex-item" style="background: red"></view>
3.   <view class="flex-item" style="background: green"></view>
4.   <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .space-between{
2.   flex-direction:row;
3.   justify-content: space-between;
4. }
5. .flex-wrp{
6.   height: 100px;
7.   display:flex;
8.   background-color: #FFFFFF;
9. }
10. .flex-item{
11.   width: 100px;
12.   height: 100px;
13. }
14. .red{
15.   background: red;
16. }
17. .green{
18.   background: green;
19. }
20. .blue{
21.   background: blue;
22. }

 

justify-content: space-around

 

 

wxml

 

1. <view class="flex-wrp space-around">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

 

wxss

 

1. .space-around{
2.     flex-direction:row;
3.     justify-content: space-around;
4. }
5. .flex-wrp{
6.     height: 100px;
7.     display:flex;
8.     background-color: #FFFFFF;
9. }
10. .flex-item{
11.     width: 100px;
12.     height: 100px;
13. }
14. .red{
15.     background: red;
16. }
17. .green{
18.     background: green;
19. }
20. .blue{
21.     background: blue;
22. }

align-items: flex-end

wxml

1. <view class="flex-wrp align-items-flex-end">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

wxss

1. .align-items-flex-end{
2.     height: 200px;
3.     flex-direction:row;
4.     justify-content: center;
5.     align-items: flex-end;
6. }
7. .flex-wrp{
8.     height: 100px;
9.     display:flex;
10.     background-color: #FFFFFF;
11. }
12. .flex-item{
13.     width: 100px;
14.     height: 100px;
15. }
16. .red{
17.     background: red;
18. }
19. .green{
20.     background: green;
21. }
22. .blue{
23.     background: blue;
24. }

align-items: center

wxml

1. <view class="flex-wrp align-items-center">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

wxss

1. .align-items-center{
2.     height: 200px;
3.     flex-direction:row;
4.     justify-content: center;
5.     align-items: center;
6. }
7. .flex-wrp{
8.     height: 100px;
9.     display:flex;
10.     background-color: #FFFFFF;
11. }
12. .flex-item{
13.     width: 100px;
14.     height: 100px;
15. }
16. .red{
17.     background: red;
18. }
19. .green{
20.     background: green;
21. }
22. .blue{
23.     background: blue;
24. }

align-items: flex-start

wxml

1. <view class="flex-wrp align-items-flex-start">
2.     <view class="flex-item" style="background: red"></view>
3.     <view class="flex-item" style="background: green"></view>
4.     <view class="flex-item" style="background: blue"></view>
5. </view>

wxss

1. .align-items-flex-start{
2.     height: 200px;
3.     flex-direction:row;
4.     justify-content: center;
5.     align-items: flex-start;
6. }
7. .flex-wrp{
8.     height: 100px;
9.     display:flex;
10.     background-color: #FFFFFF;
11. }
12. .flex-item{
13.     width: 100px;
14.     height: 100px;
15. }
16. .red{
17.     background: red;
18. }
19. .green{
20.     background: green;
21. }
22. .blue{
23.     background: blue;
24. }

主要属性：

排列方式（flex-direction），用于wxss

属性	描述
row	横向排列
column	纵向排列

弹性项目内容对齐（justify-content），用于wxss

属性	描述
flex-start	弹性项目向行头紧挨着填充
flex-end	弹性项目向行尾紧挨着填充
center	弹性项目居中紧挨着填充
space-between	弹性项目平均分布在该行上
space-around	弹性项目平均分布在该行上，两边留有一半的间隔空间

项目在容器内侧轴方位的对齐方式（align-items），用于wxss

属性	描述
stretch	默认值，弹性项目被拉伸以适应容器
center	弹性项目位于容器的中心
flex-start	弹性项目位于容器的开头
flex-end	弹性项目位于容器的结尾
baseline	弹性项目位于容器的基线上

上一篇：小程序极速实战开发《二》scroll-view可滚动视图区域

下一篇：【四：录音功能】微信小程序（全部代码）开发跑步App+音乐播

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章

• 微信小程序开发工具 常用快捷键2018-06-09
• 微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
• 微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
• 微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
• 梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
• 微信小程序使用Promise实践2018-02-07
• 微信小程序开发系列分析《一》视图层2018-02-07
• 微信小程序开发系列分析《二》数据层2018-02-07
• 微信小程序官方文档个人分析心得2018-02-07
• 微信小程序的原型设计尝鲜2018-02-07

最新文章

• 微信小程序开发工具 常用快捷键

  日期：2018-06-09    浏览：722次

• 微信小程序架构分析《一》调试技巧，模块构成，理念分析

  日期：2018-02-07    浏览：929次

• 微信小程序架构分析《二》：view 模块和 service 模块的构成

  日期：2018-02-07    浏览：439次

• 微信小程序架构分析《三》：实现过程以及实时更新

  日期：2018-02-07    浏览：502次

• 梁兴臣:微信小程序开发三宗罪和解决方案

  日期：2018-02-07    浏览：423次

推荐文章

随机文章

• 微信小程序实例-获取当前的地理位置
• 微信小程序技术分析：运行机制
• 【超详细】从2到3：初学者入门Demo内容详情页
• 微信小程序button 修改样式
• 面向新手《二十一》video详解，wx.request使用post参数说明
• 【后端】java基础（4.5）java中级基础之综合应用与api文档

热门小程序

• 

  随机摇号器

• 

  高考加油

• 

  腾讯相册

• 

  影子恋爱助手

• 

  小病自助

• 

  图片拼接

• 

  传图加画框

• 

  特工云管家

• 

  群小助手

• 

  微头条微信小程序入口

• 

  不要做挑战 I 害你在心口难开

• 

  重名查询工具