小程序开发基础之视角视图容器

本文介绍了小程序开发基础之视角视图容器，分享给大家，具体如下：

视图容器

//wxmlview class=' section ' view class=' section _ _ title ' flex-direction : row/view view class=' flex-wrp _ one ' view class=' flex-item BC _ green ' 1/view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view//wxss。flex-wrp _ one { display : flex；挠曲方向：行；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9500 . 163.com)

图片

//wxmlview class=' section ' view class=' section _ _ title ' flex-direction : column/view class=' flex-wrp _ two ' view class=' flex-item BC _ green ' 1/view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view//wxss。flex-wrp _ two { display 3360 flex；弯曲方向：柱；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9501 . 163.com)

图片

//wxmlview class=' section ' view class=' section _ _ title ' alignment-content : flex-start/view view class=' flex-wrp _ three ' view class=' flex-item BC _ green ' 1/view view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view//wxss .flex-wrp _ three { display : flex；正义-内容： flex-start；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9502 . 163.com)

视角

//wxmlview class=' section ' view class=' section _ _ title ' alignment-content : flex-end/view class=' flex-wrp _ four ' view class=' flex-item BC _ green ' 1/view view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view/view//wxss。flex-wrp _ four { display 3360 flex；正义-内容：灵活端；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9503 . 163.com)

视角

//wxmlview类=“剖面”视图类=' section _ _ title '对齐-内容：中心/视图类='flex-wrp_five '视图类=' flex-item BC _ green ' 1/视图类=' flex-item BC _ red ' 2/视图类=' flex-item BC _ blue ' 3/view/view//wxss。flex-wrp _ five { display 3360 flex；正义-内容：中心；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9504 . 163.com)

视角

//wxmlview class=' section ' view class=' section _ _ title ' alignment-content : space-with/view view class=' flex-wrp _ six ' view class=' flex-item BC _ green ' 1/view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view//wxss。flex-wrp _ six { display 3360 flex；正义-内容：空格；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9505 . 163.com)

视角

//wxmlview class=' section ' view class=' section _ _ title ' alignment-content : space-round/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//wxss。flex-wrp _ seven { display 3360 flex；证明内容：空间环绕；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9506 . 163.com)

视角

//wxmlview class=' section ' view class=' section _ _ title ' alignment-content : space-every/view class=' flex-wrp _八字形view class=' flex-item BC _ green ' 1/view view view class=' flex-item BC _ red ' 2/view view class=' flex-item BC _ blue ' 3/view/view/view//wxss。flex-wrp _八字形{ display : flexalign-content :空间均匀；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。BC _ blue { background : blue }(9507 . 163.com)

视角

属性

排列方式（弯曲方向)描述排横向排列圆柱纵向排列项目内容对齐（调整内容)描述弹性启动向行头紧挨柔性端向行尾紧挨中心居中紧挨间隔平均分布太空环绕平均分布，两边留有一半间隔空间均匀两边间隔与中间相同源码

//wxmlview类=“剖面”视图类=' section _ _ title ' flex-方向：行/视图类='flex-wrp_one '视图类=' flex-item BC _ green ' 1/视图类=' flex-item BC _ red ' 2/视图类='flex-item bc_blue'3/view /view类=“剖面”视图类=' section _ _ title ' flex-direction :栏/视图类='flex-wrp_two '视图类='/view/view class=' section ' view class=' section _ _ title ' alignment-content : space-with/view view class=' flex-wrp _ sive ' view class=' flex-item BC _ green ' 1/view view view view class=' flex-item BC _ red ' 2/view view view class=' flex-item BC _ blue ' 3/view/view/view class=' section ' view class=' section _ _ title ' alignment-content : space-with/view class=' flex-wrp _ seven ' flex-direction : row； }.flex-wrp _ two { display : flex；弯曲方向：柱；}.flex-wrp _ three { display : flex；正义-内容： flex-start；}.flex-wrp _ four { display : flex；正义-内容：灵活端；}.flex-wrp _ five { display : flex；正义-内容：中心；}.flex-wrp _ six { display : flex；正义-内容：空格；}.flex-wrp _ seven { display : flex；证明内容：空间环绕；}.flex-wrp _八{ display : flexalign-content :空间均匀；}.flex-item { width : 100 px；高度： 100像素；}.bc _ green { background: green}。bc _ red { background: red}。bc _ blue { background: blue}开源开源代码库分享

微信_小程序_分享

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。